PLUGINS &
MARKETPLACE!

Every team has the job the design tool doesn't do. Renaming eighty layers to a pattern. Checking every text layer against the brand's contrast rules. Importing a file format from 2003 that one client still sends. You can file a feature request and wait, or you can write forty lines of JavaScript.

PopCraft plugins are small web bundles: a JSON manifest, a JavaScript file, and an optional HTML panel. They run in a sandbox, talk to the file through an asynchronous popcraft API, and can only do what their manifest asks for and you allow. When one is good, publish it, and the rest of PopCraft can install it.

Most plugins are one of these, or two of them stuck together. Every clip is one of the open example plugins, installed from its file and run on a real template.

Four pieces, and only the first two are required. (A theme pack needs just the manifest: it contributes data, not code.)

{
  "id": "acme.tidy",
  "name": "Tidy",
  "version": "1.0.0",
  "main": "main.js",
  "permissions": ["read", "write"],
  "commands": [{ "id": "go", "label": "Tidy up" }]
}

const sel = await popcraft.getSelection()
await popcraft.notify(`${sel.length} selected`)
await popcraft.closePlugin()

<button id="apply">Arrange</button>
<script>
  apply.onclick = () =>
    popcraft.postMessage({ type: 'apply' })
</script>

popcraft.widget.register({
  initialState: { count: 0 },
  render: s => ({ type: 'Text',
    characters: String(s.count),
    onClick: () => { s.count++ } }),
})

The main script runs invisibly when someone picks one of your commands. It has no DOM access to the editor; every call goes through popcraft and returns a promise. The panel opens beside the canvas when you call showUI, from 160×120 up to 900×900 pixels, and passes messages to the main script. The types ship as @popcraft/plugins on npm, generated from the runtime itself, so autocomplete never disagrees with what actually runs.

A manifest can also contribute things without code: UI themes, sidebar panels, and importers.

A plugin can add formats to File, Import, Home's New, Import and the Home drop zone. Declare the extensions it accepts in the manifest, and when somebody picks a matching file, your command runs with the bytes. Importing as a new file follows the same rules as New File; importing into the open document needs edit access.

The built-in formats go through the same path, so a plugin format sits beside them as an equal. The Publisher import on the marketplace works this way. A converter too big for the 5 MB package can fetch its WebAssembly at run time, with the network permission.

Review is quick to describe: a reviewer checks that the plugin does what its name says, asks only for what it needs, explains any network use, doesn't send file contents somewhere unexpected, and doesn't dress up as PopCraft UI. A rejected version comes back with a note. A later update is reviewed again only if it asks for a permission no approved version had.

The getpopcraft/plugins repository has one example of every marketplace kind, one folder each, and the SDK beside them. The plugins: Arrange in Grid, Rename Layers, Contrast Checker and Pop Palette. The widgets: a checklist, Pow Poll and a vote counter. Plus theme packs, brush packs, a shader pack and templates.

Its CI publishes all of them to the marketplace from the repo. Copy the examples folder, the publish script and the workflow, and you have a working pipeline before lunch.

1. 1

   Write a manifest

   An id with a prefix you own, a version, the commands, and only the permissions you use.
2. 2

   Write main.js

   Talk to the file through the popcraft API. Add @popcraft/plugins for autocomplete in your editor.
3. 3

   Add a panel if you need one

   ui.html opens beside the canvas with showUI, and trades messages with your main script.
4. 4

   Install from file

   Main menu, Manage plugins, Install from file. Pick the .zip or the single-file .json.
5. 5

   Run it, fix it, run it again

   Commands show in the plugin manager. The permission prompt shows on the first run.
6. 6

   Publish

   Publish from file, or from CI with a token. The first version goes to review, then it is listed.