Skip to content

Plugins

Editor plugins Beta

Plugins add panels to the editor. Import a .sshowplugin file to install one, then click it in the list to run it.

A plugin is a small tool with its own panel. It reads the document and creates or edits objects the same way the editor does — always as undoable edits.

Installing from the catalog

Published plugins live in the studio dashboard. Installing adds the plugin to your account, so it loads automatically in every editor you sign in to — web and desktop.

  1. 1 Open the studio dashboard and choose Plugins in the sidebar.
  2. 2 Search or browse the catalog, then press Install on a card — the card shows details on click.
  3. 3 Open any project — installed plugins appear in the editor's Plugins panel, ready to run.

Installs are saved to your account. Removing a plugin — from a card or from the editor panel — removes it everywhere.

Using plugins

  1. 1 Open the Plugins panel with its button in the top-right toolbar, next to search.
  2. 2 Import a .sshowplugin file with the + button in the panel title bar.
  3. 3 Click a plugin in the list to run it in its own panel. Closing that panel stops the plugin.
  4. 4 Remove a plugin with the − button on the right of its row.
The Plugins panel listing plugins with icon, name, version and author
The Plugins panel — search on top, import (+) in the title bar, and one row per plugin with its icon, version and author.

The search field filters the list by name, author and description, and the running plugin's row is highlighted.

Everything a plugin changes in the document reverts with a single undo (Ctrl+Z).

The .sshowplugin file

A plugin package is a zip holding plugin.json and one screen document (ui.html). The plugin.json fields are:

Field Description
id Unique id — lowercase reverse-domain style (required)
name Name shown in the list and panel title (required)
version x.y.z version (required)
api Plugin API version — currently 1 (required)
main Screen document filename, e.g. ui.html (required)
description One-line description shown in the list (optional)
author Author name shown in the list (optional)
icon Icon filename inside the package — png/svg/jpg/webp (optional)

Building your own

A plugin's screen document is an ordinary web page. You can start from a single HTML file with no build tools, and connect to the editor with SSHOWPlugin.connect().

  • document.getState() — read a snapshot of the whole document.
  • document.getSelection() — read the selected objects.
  • document.applyActions(actions) — the only way to edit the document. One call is one undo step.
  • events.on/off — subscribe to document and selection changes.
  • ui.resize(size) — request a screen size inside the panel: a height, or { width, height }.

Every call is asynchronous (a Promise). The document only changes through actions, so a malformed request cannot corrupt it.

Safety

  • Plugins run inside an isolated sandbox with no network access.
  • Document access goes through the API above only — a plugin cannot reach the editor screen or your account.
  • Documents carry no trace of plugins. A document made with a plugin opens identically without it.