---
title: "Integrate Document Authoring (WYSIWYG library) using CDN"
canonical_url: "https://www.nutrient.io/sdk/document-authoring/getting-started/using-cdn/"
md_url: "https://www.nutrient.io/sdk/document-authoring/getting-started/using-cdn.md"
last_updated: "2026-06-09T10:25:14.600Z"
description: "Integrate Document Authoring — what you see is what you get (WYSIWYG) TypeScript library — into your web application using CDN for in-browser visual editing without external word processing software."
---

# Integrate Document Authoring (WYSIWYG library) using CDN

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:

   ```html

   <!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.

---

## Related pages

- [Getting started with Document Authoring](/sdk/document-authoring/getting-started.md)
- [or](/sdk/document-authoring/getting-started/using-other-setups.md)
- [or](/sdk/document-authoring/getting-started/using-npm.md)
- [or](/sdk/document-authoring/getting-started/using-vite.md)

