create-svgsketch-plugin

Scaffold a new SVGSketch plugin project with TypeScript, a dev server, and hot reload.

Usage

npx create-svgsketch-plugin my-plugin
cd my-plugin
npm install
npm run dev

That's it. Your plugin is running at http://localhost:9999/index.js with automatic rebuilds on file changes.

What you get

my-plugin/
├── src/
│   └── index.ts       ← Your plugin (TypeScript, fully typed)
├── server.js          ← Dev server with CORS (auto-started by npm run dev)
├── package.json
├── tsconfig.json
└── README.md

• TypeScript with full type checking via @svgsketch/plugin-sdk
• Hot reload — edit src/index.ts, the bundle rebuilds automatically
• Dev server — serves your plugin with CORS headers for Developer Mode loading
• Production build — npm run build outputs a minified dist/index.js

Loading your plugin in SVGSketch

1. Run npm run dev in your plugin directory
2. Open SVGSketch in your browser
3. Go to Settings > Plugins and enable Developer Mode
4. Click Add, enter a name and URL: http://localhost:9999/index.js
5. Reload the editor
6. Open the marketplace (puzzle piece icon) — your plugin appears with a yellow DEV badge
7. Enable your plugin and start testing

Scripts

| Command | Description | |---------|-------------| | npm run dev | Start dev server + watch for changes | | npm run build | Production build (minified, single file) | | npm run check | TypeScript type checking |

Publishing your plugin

When your plugin is ready:

1. Run npm run build to create the production bundle
2. Submit your dist/index.js + a manifest.json through the SVGSketch marketplace
3. After review and approval, your plugin will be available to all SVGSketch users

Documentation

• Plugin Development Guide
• API Reference
• Contributions — tools, panels, commands, menus
• Events & Middleware
• Plugin SDK on npm

License

MIT