Editor

---

• Embed Placid SDK from CDN

Initializing the Placid Editor

The Placid Editor allows you to embed a customizable editing experience of your templates directly into your application. This guide walks you through the steps to integrate the Placid Editor SDK.

Step 1: Embed the Placid SDK

To get started, you'll need to embed the Placid SDK in your HTML. This can be done by including the following script tag, sourced from Placid's CDN:

<script src="https://sdk.placid.app/editor-sdk@latest/sdk.js"></script>

Step 2: Set Up the Editor Container

Create a container in your HTML where the editor will be rendered. For example:

<div id="editor"></div>

Step 3: Initialize the Editor

Now, you can initialize the Placid Editor within the specified container. Use the following JavaScript to create an instance of the editor:

const editorInstance = EditorSDK.editor.create(document.getElementById("editor"), {
    access_token: "{ YOUR_JWT_TOKEN }",     // Replace with your JWT token
    template_uuid: "{ YOUR_TEMPLATE_UUID }", // Replace with your template UUID

    // - prefill the current template 
    prefill_layers: {}
});

Available options

Editor Options

The SDK offers a range of options to customize the functionality and appearance of the editor. Use these options inside your JWT Access Token to set them up.

{
    ...
    "editor_options": {
        ...
    },
    ...
}

Available options

Editor Methods

Here's how you can utilize the methods of the editor:

Example

const editorInstance = /* Your editor instance */;

editorInstance.save();

Available methods

Editor Events

The SDK offers a range of events to listen to

const editorInstance = /* Your editor instance */;

editorInstance.on('editor:closed', (editorInstance) => {
    console.log('Editor closed');
});

Available options

Editor Examples

OPEN EXAMPLE EDITOR