Embed the Editor

Embed the DocStar editor inside your own product so your users can create and edit documents without leaving your app. You add one script tag, sign a token on your server, and listen for content changes.

1. Create a new collection.
2. Under Select Type, choose Embed.
3. Open the collection. Instead of pages, you'll see the embed configuration.

The configuration page has these sections:

• Menu Configuration: choose which editor menus and formatting tools your users get, or click Select All Menus. You can also set the placeholder text shown in an empty editor.
• Advanced Options:
  • Page Name: turn on Show Page Name to display the page title (hidden by default).
  • History Button: turn on Show History Button to let users open version history.
  • Response Type: choose HTML (default) or Markdown for the content DocStar sends back to your app.
  • Webhook URL: a URL where DocStar sends content updates.

Click Save Configuration when you're done.

Your server creates a signed token for each user. Never create it in the browser.

1. Open Script Configuration and copy the JWT payload:

{
  "org_id": "your org id",
  "collection_id": "your collection id",
  "user_id": "UserId",
  "read_only": false
}

2. Set user_id to your own ID for the user. Set read_only to true for view-only access.
3. Click Generate Access Token. DocStar shows your JWT Signature key.
4. On your server, sign the payload as a JWT (HS256) using that key. The result is the user's embed token.

Keep the key secret. DocStar checks every token on its servers, so editing rights always come from the token.

<script
  id="docstar-main-script"
  defaultOpen="true"
  page_id="your page id"
  embedToken="Enter Embed Token here"
  src="https://app.docstar.io/scriptProd.js">
</script>

Set page_id to your own ID for the document, and embedToken to the token from step 3.

Create a page at runtime and optionally fill it with content:

window.sendDataToDocstar({
  parentId: "parentContainer",
  page_id: "your page id",
  content: "content" // optional
});

Replace the whole content of an existing page:

window.sendUpdateToDocstar({
  page_id: "your page id",
  content: "new content"
});

Listen for messages from the editor:

window.addEventListener('message', (event) => {
  const { type, data } = event.data || {};

  if (type === 'docstar_publish_data') {
    console.log('Published page data:', data);
  }

  if (type === 'editor_data') {
    console.log('Editor content:', data);
  }
});

• docstar_publish_data is sent when a page is published.
• editor_data is sent when the user clicks outside the editor. Content arrives as HTML or Markdown, depending on Response Type.

To receive updates on your server instead, add a Webhook URL in Advanced Options. The Webhooks section of the embed configuration also lets you add page event webhooks and review delivery logs. See Webhooks.

• Check event.origin in your listener so you only accept messages from DocStar.
• Use a stable page_id per document, such as your own record ID, so the same document opens each time.
• Generate a new token per user so every edit is tied to the right person.