Creating Your First Plugin

This guide walks you through building a plugin that randomizes background colors on child frames of the selected element.

Setup

Create a new directory and initialize the project:

mkdir my-revyme-plugin && cd my-revyme-plugin
npm init -y
npm install @revyme/plugin-sdk
npm install -D tsup typescript

Add build scripts to package.json:

{
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts",
    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
  }
}

Write the plugin

Create src/index.ts:

import { definePlugin } from '@revyme/plugin-sdk';
 
export default definePlugin({
  name: 'Color Randomizer',
  icon: 'Palette',
  description: 'Randomize background colors of child frames',
  controls: {
    saturation: {
      type: 'slider',
      label: 'Saturation',
      default: 70,
      min: 0,
      max: 100,
    },
    lightness: {
      type: 'slider',
      label: 'Lightness',
      default: 50,
      min: 0,
      max: 100,
    },
  },
  run(values, sdk) {
    const selected = sdk.nodes.getSelected();
    if (selected.length === 0) return;
 
    const parent = selected[0];
    const children = sdk.nodes.getChildren(parent.id);
 
    for (const child of children) {
      const hue = Math.floor(Math.random() * 360);
      const color = `hsl(${hue}, ${values.saturation}%, ${values.lightness}%)`;
      sdk.nodes.update(child.id, {
        styles: { backgroundColor: color },
      });
    }
  },
});

Build

npm run build

This outputs dist/index.js and dist/index.cjs.

Upload to marketplace

Go to your Revyme dashboard and open the Plugins section
Click Add Plugin and fill in the name, description, and upload your thumbnail
Upload dist/index.cjs as the bundle file
Submit for review

Once approved, your plugin will appear in every user's command palette.

Push updates via CLI

After the first manual upload, use the CLI for faster updates.

Copy the Plugin ID from the dashboard (Plugin Info modal) and add it to your package.json:

{
  "revyme": {
    "pluginId": "your-plugin-id-here"
  }
}

Then set up the CLI:

npx revyme login
# Enter your API key from Dashboard → Settings → API Key
 
npm run build
npx revyme push -m "Added lightness control"

Controls reference

Plugins support these control types:

number — Numeric input with optional min/max/step
text — Text input with optional placeholder
color — Color picker
select — Dropdown with predefined options
toggle — Boolean on/off switch
slider — Range slider with min/max/step

Each control requires a label and default value. The control values are passed to your run function as a key-value object matching your control names.

Next steps

Nodes API — Read and modify design elements
Presets API — Create and manage style presets
Pages API — Work with pages
CLI Reference — Push updates from your terminal