Skip to main content

​
Build your plugin

Before deploying, ensure your plugin is compiled to a single JavaScript file:

​
TypeScript compilation

If you’re using TypeScript, compile it to JavaScript: 
{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "moduleResolution": "bundler",
    "outDir": "dist"
  }
}

​
Using a bundler

For dependencies or advanced builds, use a bundler like Vite, tsdown, or esbuild: 
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      formats: ['es'],
      fileName: 'plugin'
    },
    rollupOptions: {
      external: ['@tempad-dev/plugins']
    }
  }
})
Your plugin must be a valid ES module. CommonJS (module.exports, require()) is not supported.

​
Hosting options

Plugins must be accessible via HTTPS and support cross-origin requests (CORS).

​
GitHub (recommended)

Host your plugin in a GitHub repository and use raw URLs: 
https://raw.githubusercontent.com/{username}/{repo}/refs/heads/{branch}/{filename}.js
Example: 
https://raw.githubusercontent.com/Justineo/tempad-dev-plugin-kong/refs/heads/main/dist/kong.mjs
Advantages:
  • Free hosting
  • Version control built-in
  • CORS enabled by default
  • Easy to update

​
GitHub Gist

For single-file plugins, use a Gist:
  1. Create a new Gist at gist.github.com
  2. Add your plugin code
  3. Click “Create public gist”
  4. Click the “Raw” button to get the URL
https://gist.githubusercontent.com/{username}/{gist-id}/raw/{filename}.js

​
CDN services

Host on a CDN that supports ESM: 
https://cdn.jsdelivr.net/gh/{username}/{repo}@{version}/{file}
CDN URLs typically cache aggressively. Use version tags or commit SHAs to ensure updates are reflected.

​
Plugin structure requirements

Your plugin file must:
  1. Be a valid ES module
// ✅ Good
export default definePlugin({ ... })

// ❌ Bad
module.exports = { ... }
  1. Export as default or named plugin
// Option 1: default export (recommended)
export default definePlugin({ ... })

// Option 2: named export
export const plugin = definePlugin({ ... })
  1. Support cross-origin requests
    • GitHub raw URLs work automatically
    • Custom servers must set Access-Control-Allow-Origin: *

​
Security considerations

Plugins run in a Web Worker with limited globals. Only these are available:
  • Standard JavaScript built-ins (Array, Object, Math, Date, etc.)
  • console for debugging
  • Plugin SDK exports (definePlugin, h, findChild, etc.)
Not available:
  • DOM APIs (document, window, localStorage)
  • Network requests (fetch, XMLHttpRequest)
  • Node.js APIs (fs, path, process)
  • Third-party libraries (unless bundled)
For security details, see the safe globals implementation.

​
Testing your plugin

​
Local testing

  1. Run a local dev server (e.g., Vite, Next.js):
npx vite --port 3000
  1. Use the local network URL in TemPad Dev:
http://localhost:3000/dist/plugin.js
  1. Changes will reflect after manually updating in Preferences

​
Browser testing

  1. Open TemPad Dev in Figma
  2. Go to Preferences → Plugins
  3. Paste your plugin URL
  4. Click Save
  5. Select an element to see your plugin’s output
Plugin code is cached in browser local storage. You must click “Update” or re-paste the URL to reload changes.

​
Sharing your plugin

​
Option 1: Share the URL

Simply share your plugin URL with others: 
Install this plugin in TemPad Dev:
https://raw.githubusercontent.com/username/tempad-plugin/main/dist/index.js

​
Option 2: Add to official registry

Contribute to the plugin registry so users can install by name:
  1. Fork the TemPad Dev repository
  2. Edit packages/extension/plugins/available-plugins.json
  3. Add your plugin:
{
  "name": "my-plugin",
  "author": "@yourusername",
  "description": "Short description of your plugin",
  "repo": "https://github.com/yourusername/tempad-plugin",
  "url": "https://raw.githubusercontent.com/yourusername/tempad-plugin/main/dist/index.js"
}
  1. Submit a pull request
Once merged, users can install with: 
@my-plugin

​
Example repository structure

Here’s a recommended structure for a plugin repository: 
tempad-plugin/
├── src/
│   └── index.ts          # Plugin source code
├── dist/
│   └── index.js          # Compiled output
├── package.json
├── tsconfig.json
├── README.md             # Plugin documentation
└── LICENSE

​
Example package.json

{
  "name": "tempad-dev-plugin-example",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  },
  "devDependencies": {
    "@tempad-dev/plugins": "latest",
    "typescript": "^5.0.0"
  }
}

​
Versioning and updates

Plugins are not auto-updated. Users must manually update from the Preferences UI.

​
Versioning strategy

  1. Use semantic versioning in your repository
  2. Tag releases in GitHub:
git tag v1.0.0
git push origin v1.0.0
  1. Update the URL when breaking changes occur:
# Users on v1
https://raw.githubusercontent.com/username/plugin/refs/tags/v1.0.0/dist/index.js

# Users on v2  
https://raw.githubusercontent.com/username/plugin/refs/tags/v2.0.0/dist/index.js

​
Changelog

Maintain a CHANGELOG.md to document changes: 
# Changelog

## [1.1.0] - 2026-03-05
### Added
- Support for transformComponent hook
- New design token mapping

### Fixed
- Variable conversion edge case

## [1.0.0] - 2026-01-15
- Initial release

​
Real-world examples

Study these production plugins for reference:

​
Troubleshooting

​
Plugin not loading

  • ✅ Check that the URL is accessible in your browser
  • ✅ Verify CORS headers allow cross-origin requests
  • ✅ Ensure the file is a valid ES module
  • ✅ Check browser console for error messages

​
Changes not reflecting

  • ✅ Manually update the plugin from Preferences
  • ✅ Clear browser cache and reload
  • ✅ Use version tags in URLs to bypass caching

​
Transform not working

  • ✅ Check that your hook returns a string (or DevComponent for transformComponent)
  • ✅ Verify the hook name matches exactly (transform, transformVariable, etc.)
  • ✅ Test with simple console.log statements to debug

​
Next steps

Available Plugins

Browse the official plugin registry

Plugin Overview

Learn more about the plugin system

Build docs developers (and LLMs) love

Get started for freeTalk to us