Editor

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

Option Description
access_token your actual JWT TOKEN
template_uuid The template UUID you wish to edit
prefill_layers (Optional) Prefill the current template with values based on the REST API notation
Note that any changes made with prefill_layers will not be saved automatically; users must manually save changes within the editor.

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

Option Description
enableCanvasResizing Enables the settings for resizing the template canvas; defaults to true
enableCanvasTransparency Enables the setting for changing the canvas transparency; defaults to true
enableTemplateRenaming Enables the setting for renaming the template; defaults to true
enableButtonSave Shows a Save Button; defaults to true
enableButtonSaveAndClose Shows a Save&Close Button (you might want to set enableButtonSave to false when using this option); defaults to false
layersHardlocked Supply a list of layers that the user should not be able to select, modify, rename and delete; defaults to []
layersSoftlocked Supply a list of layers that the user should be able to modify, but not rename or delete; defaults to []
canvasMaxWidth Maximum width for the canvas
canvasMaxHeight Maximum height for the canvas
enableLayerDynamicToggle Enables the dynamic toggle setting for layers
enableLayerVisibilityToggle Enables the layer visibility toggle setting
enableVideoSettings Enables the video settings panel (animations)
enablePdfSettings Enables the PDF settings panel (DPI, Compression)
editorMode Defines the mode of the editor. set to inline or fullscreen (default)
enableTitleBar Enables the title bar

Editor Methods

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

Example

const editorInstance = /* Your editor instance */;

editorInstance.save();

Available methods

Event Description
save Save the currently opened template. Useful in scenarios where you build your own header
destroy Destroy the current editor instance and cleanup
undo Undo the last change made on a template
redo Redo the previously undone change on a template

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

Event Description
editor:closed Fired when the editor has been closed
editor:template:saved Fired when the current template save has finished

Editor Examples

OPEN EXAMPLE EDITOR