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:

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

You can then enable loading of your local code in Lucid by using the Developer menu and then clicking "Enter developer mode". The developer mode menu will open and will attempt to load your editor extension code.

📘

Loading local extensions 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 using the refresh button in the developer mode menu to reload the extension.

📘

You can also enable Auto-refresh in the Developer Mode menu to automatically reload your extension after a change.

For all published editor extensions your code runs in a sandboxed JavaScript VM for security. However, this makes debugging difficult. With Developer Mode 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.

Warning: Some features may not work once you release your extension because they are not allowed in the sandbox but are allowed in the scoped eval. For example, editor extensions are not allowed to directly access any browser DOM APIs and thus any calls made to those will not work in published extensions.

Developer Mode

Developer Mode can be used to better help you manage your local extension. It will create a status menu at the top of the editor that shows the current status of an extension. It also allows you to toggle auto-refresh for your extension or refresh the connection with your extension manually without reloading the entire page.

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:

npx lucid-package@latest 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:

npx lucid-package@latest 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:

npx lucid-package@latest bundle

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