This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /sdk/document-authoring/getting-started/using-cdn.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Integrate Document Authoring (WYSIWYG library) using CDN

Integrate Document Authoring (WYSIWYG library) using CDN

AI quick start: Tell your coding agent

"Integrate Nutrient Document Authoring SDK in my web application using a CDN. Use getadoceditor.com".

Markdown version of this page, suitable for AI agents and automation

This guide walks you through the process of integrating the Document Authoring — what you see is what you get (WYSIWYG) TypeScript library — into your web application using a Content Delivery Network (CDN). By following these steps, you’ll be able to set up in-browser visual editing capabilities without the need for external word processing software.

  1. Create an index.html file and paste the following code in it:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>My app</title>
        <style>
          body {
            margin: 0;
          }
          .my-editor {
            position: relative;
            width: 100%;
            height: 100vh;
          }
        </style>
      </head>
      <body>
        <div id="editor" class="my-editor"></div>
        <script src="https://document-authoring.cdn.nutrient.io/releases/document-authoring-1.15.1-umd.js"></script>
        <script>
          (async () => {
            const docAuthSystem = await DocAuth.createDocAuthSystem();
    

            const editor = await docAuthSystem.createEditor(document.getElementById('editor'), {
              document: await docAuthSystem.createDocumentFromPlaintext('Hello world!'),
            });
          })();
        </script>
      </body>
    </html>

  2. Open the file in your browser, and you’ll see the default setup of the Document Authoring editor.