Getting Started with Document Authoring

Installing via npm in Your Project

For easy integration, the Document Authoring TypeScript library is available via the npm registry.

Requirements

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using the Document Authoring library.

Type Definitions and Module Systems

We provide type definitions and support for CommonJS, ESM, AMD, and a global DocAuth object from the same package. These should be resolved automatically from our package.json file.

Adding to Your Project

npm install @pspdfkit/document-authoring
yarn add @pspdfkit/document-authoring
pnpm add @pspdfkit/document-authoring
bun add @pspdfkit/document-authoring

Integrating into Your Project

  1. Add an empty <div> element with a position set to a value other than static, and with a defined width and height. This will be the target DOM element where the editor will be loaded:

<div id="editor" style="position: relative; width: 100%; height: 100vh; border: 1px solid #dcdcdc;"></div>

  1. Import @pspdfkit/document-authoring into your application and initialize the editor:

import DocAuth from '@pspdfkit/document-authoring';

const docAuthSystem = await DocAuth.createDocAuthSystem();

const editor = await docAuthSystem.createEditor(document.getElementById('editor'), {
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
});

This is all you need to get started in an existing project.

Using in a New Vite Project

For a new project using Vite, you can easily set up the environment to include @pspdfkit/document-authoring.

Creating a New Vite Project

npm create vite@latest my-app
cd my-app
yarn create vite my-app
cd my-app
pnpm create vite my-app
cd my-app
bun create vite my-app
cd my-app

Installing the Library

npm install @pspdfkit/document-authoring
yarn add @pspdfkit/document-authoring
pnpm add @pspdfkit/document-authoring
bun add @pspdfkit/document-authoring

Integrating into Your Project

  1. Add an empty <div> element with a position set to a value other than static, and with a defined width and height. This will be the target DOM element where the editor will be loaded:

<div id="editor" style="position: relative; width: 100%; height: 100vh; border: 1px solid #dcdcdc;"></div>

  1. Import the library:

import { createDocAuthSystem } from '@pspdfkit/document-authoring';

(async () => {
  const docAuthSystem = await createDocAuthSystem();

  const editor = await docAuthSystem.createEditor(document.getElementById('editor'), {
    document: await docAuthSystem.createDocumentFromPlaintext('Hello world!'),
  });
})();

Running the Vite Dev Server

npm run dev
yarn dev
pnpm dev
bun run dev

Using Our Example HTML File

If you’re looking for a fast setup using just an HTML file, you can use the content delivery network (CDN) version of the library.

  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.pspdfkit.com/releases/document-authoring-1.0.23-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.

Using Our CDN in Your Project

If you prefer not to use npm and want to load the library via our content delivery network (CDN), you can include it in your HTML file directly.

  1. Add the script tag below to your HTML file.

This will load the latest version of the library from the CDN and pull in any required assets:

<script src="https://document-authoring-cdn.pspdfkit.com/releases/document-authoring-1.0.23-umd.js"></script>

  1. Add an empty <div> element with a position set to a value other than static, and with a defined width and height. This will be the target DOM element where the editor will be loaded:

<div id="editor" style="position: relative; width: 100%; height: 100vh; border: 1px solid #dcdcdc;"></div>

  1. Use the library as shown below:

<script>
  (async () => {
   const docAuthSystem = await DocAuth.createDocAuthSystem();

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

Getting Up and Running Quickly in Your Environment

If you’re not using a bundler like Vite, webpack, or Rollup, you can include the Document Authoring library by copying the main entry point file into your project, by serving your node_modules directory, or by using import maps to define module imports. This guide will cover the first option as an example.

If you’re looking to self-host all assets, refer to our self-hosting assets guide.

You can also load everything directly from the content delivery network (CDN) with a single script tag.

Type Definitions and Module Systems

We provide type definitions and support for CommonJS, ESM, AMD, and a global DocAuth object from the same package. These should be resolved automatically from our package.json file.

Requirements

Adding to Your Project

npm install @pspdfkit/document-authoring
yarn add @pspdfkit/document-authoring
pnpm add @pspdfkit/document-authoring
bun add @pspdfkit/document-authoring

Integrating into Your Project

  1. Copy docauth.es.js from node_modules/@pspdfkit/document-authoring/lib/ to your public directory (e.g. public/js/).

  2. Import the library:

const DocAuth = await import('/lib/docauth.es.js');

const docAuthSystem = await DocAuth.createDocAuthSystem()

const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
})