@svgsketch/plugin-sdk

TypeScript types and interfaces for building SVGSketch editor plugins.

Installation

npm install --save-dev @svgsketch/plugin-sdk

Quick Start

import type { SVGSketchPlugin, PluginContext } from '@svgsketch/plugin-sdk';

export function createMyPlugin(): SVGSketchPlugin {
  let ctx: PluginContext | null = null;

  return {
    id: 'my-plugin',
    name: 'My Plugin',
    version: '1.0.0',

    contributions: {
      commands: [
        {
          id: 'my-plugin.hello',
          label: 'Say Hello',
          category: 'My Plugin',
          onExecute: () => ctx?.showToast('Hello from my plugin!'),
        },
      ],
    },

    activate(pluginCtx) {
      ctx = pluginCtx;

      // Listen for selection changes
      const dispose = ctx.onSelectionChanged((shapes) => {
        console.log(`${shapes.length} shapes selected`);
      });
    },

    deactivate() {
      ctx = null;
    },
  };
}

What's Included

This package provides TypeScript type definitions for the entire SVGSketch plugin API:

• SVGSketchPlugin — The top-level interface every plugin implements
• PluginContext — The API facade plugins receive on activation (shape read/write, events, viewport, UI, i18n)
• ShapeState — Composed from focused sub-interfaces (GeometryProps, TextProps, StrokeProps, etc.)
• Contributions — ToolContribution, PanelContribution, CommandContribution, MenuItemContribution, StatusBarContribution, SettingsContribution
• Events — PluginEventMap with 20+ event types, InterceptableEvent, InterceptResult
• Middleware — CanvasMiddlewareRegistration, CanvasPointerEventInfo
• UI Fields — 16 declarative field types for building popout and panel UIs
• Tool Handlers — ToolHandler, ToolEventContext, DragToCreateHandler

Documentation

• Plugin Development Guide — tutorials and getting started
• API Reference — complete PluginContext reference
• Contributions — tools, panels, commands, menus
• Events & Middleware — event system and pointer middleware

License

MIT