Embed Docstar Editor

The Embed feature lets you seamlessly integrate DocStar into your own product. With just a simple script, your users can create, edit, and manage documents—without leaving your interface.

Inside DocStar, create a collection specifically for embedding.

Select the extensions and features you want in the embedded editor—such as Bold, Italic etc

Select the extensions and features to enable in the embedded editor:

• Show/Hide Publish & Unpublish Buttons – Optionally display publishing controls. Rename them if desired.

• Show/Hide Page Name – Toggle page title display.

Response Type – Choose between HTML and Markdown for outside event responses.

Provide the required identifiers for authentication:

{
  "org_id": "orgId", 
  "collection_id": "Your CollectionId",
  "user_id": "UserId"
}

Click Generate Access Token to create your embed token.

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

Send Data to DocStar

How to create a dynamic page with content:

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

How to update existing content:

window.sendUpdateToDocstar({
"page_id":"your page id",
 "content": "content" //content to update
})

1. Through Events

Capture editor events inside your application:

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

Published page data

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

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

Outside click event

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

  if (type === 'editor_data') {
    console.log('Received editor HTML:', data);
  }
});

Just specify the URL where you'd like us to send these updates.