Unlocking developer features

To test an app built on the Extension API, you'll need access to the Developer Menu. To distribute your app, you'll need access to the Developer Portal. Instructions for unlocking these two tools can be found here.

Create a new package

An extension package is a set of code, content, and configuration for Lucid products that is installable by individual Lucid users or by a Lucid account admin for use by their entire account. The lucid-package CLI is provided as
a convenience to help you quickly create, test, and bundle your extension packages.

To get started, run the following commands in a directory that you want to contain your extension packages and follow the prompts:

 npx lucid-package@latest create

📘
You may create multiple extensions in the same package with create-editor-extension

Debug your editor extension

You don't need to bundle, upload, and install your extension in order to run it and make sure it works. The following command will start webpack on your code in --watch mode, and start up a local HTTP server that Lucid products can connect to, to load your latest code.

To start the debug server, run the following command from root level package folder:

npm run test-editor-extension my-extension-name

npx lucid-package test-editor-extension my-extension-name

You can then enable loading of your local code in the Developer menu in Lucidchart by clicking "Load local extension". The page will refresh and your editor extension code will run.

📘
"Load local extension" is not supported in Safari.

The main entry point to your new editor extension is in editorextensions/my-extension-name/src/extension.ts.
This is configurable in this editor extension's webpack.config.js file. Experiment by changing code in that file and refreshing your browser tab to reload it.

For all published editor extensions, and by default for this debug server as well, your code runs in a sandboxed JavaScript VM for security. However, this makes debugging difficult. If you turn on the "Debug local extensions (no sandbox)" option in the Developer menu, your code will be run via a scoped eval, allowing you to use the standard browser debugging tools to examine and step through your code.

We recommend that you do all final validation of your editor extension with the normal sandbox enabled, however, as you may have inadvertently used features not allowed in the sandbox that won't work once you release your extension. For example, editor extensions are not allowed to directly access any browser DOM APIs.

Debugging multiple editor extensions together

You can watch and serve multiple editor extensions in the same package at the same time.

To start the debug server for multiple editor extensions, run the following command:

npm run test-editor-extension my-extension-name my-other-extension-name my-third-extension-name

npx lucid-package test-editor-extension my-extension-name my-other-extension-name my-third-extension-name

To start the debug server for all editor extensions (including shape libraries) in a package, run the following command:

npm run test-editor-extension

Bundle your package for upload

First, you should create your package on the Lucid Developer Portal. Clicking on your extension should take you to a page with a URL in the form https://lucid.app/developer#/packages/<UUID>. Copy this UUID and paste it into the "id" field of your my-new-package-name/manifest.json.

Then, once your editor extension (and other extension package content) works the way you want, you can bundle it for upload to the Lucid Developer Portal with the following command:

npm run bundle

npx lucid-package bundle

This will create the file package.zip which is ready for upload to the Lucid DeveloperPortal.