Code Editor Pro

Write, paste, and share syntax-highlighted code directly on a Figma Design or FigJam canvas.

Try it in Figma · Report an issue

Highlights

• Syntax highlighting for JavaScript, TypeScript, Python, HTML, CSS, JSON, REST/HTTP, SQL, Markdown, and XML.
• A focused CodeMirror editor with line numbers, bracket matching, auto-closing brackets, language selection, and copy-to-clipboard.
• Dark and light widget themes.
• Large pastes are inserted in 200-line batches with an in-editor progress status, keeping the editor responsive.
• The widget renders selected-language code with token-aware syntax colors.
• The widget expands to fit the longest line of code.

Use it in Figma

1. Add Code Editor Pro from the Figma Community.
2. Place the widget on a Figma Design or FigJam canvas.
3. Click the code block to open the editor.
4. Write or paste code, choose a language, and wait for the progress status to finish when pasting a large file.
5. When you are finished, close the editor. Your code remains in the widget and can be opened again later.

Local development

npm ci
npm run build

Then, in Figma Desktop, go to Plugins → Development → Import plugin from manifest and select manifest.json.

Useful commands:

npm run build        # Build the UI and widget
npm run build:ui     # Copy the UI into dist/
npm run build:widget # Bundle the widget into dist/
npm run lint         # Lint the project
npm run tsc          # Type-check the widget
npm run watch        # Watch the widget bundle; rerun build:ui after UI edits

Data and network access

Code Editor Pro does not send typed or pasted code to an external service. Code remains in Figma's plugin runtime and is synchronized only between the editor window and its widget.

The editor loads pinned CodeMirror 5.65.16 assets from cdnjs.cloudflare.com. The manifest restricts network access to that domain; it is used only to load those editor assets.

Project structure

widget-src/code.tsx  Figma widget and syntax-highlighted SVG rendering
widget-src/ui.html   CodeMirror editor UI, themes, paste progress, and messages
manifest.json        Figma widget configuration and network policy

Contributing

Contributions are welcome. Please open an issue before a large change, keep the current visual style intact, and run npm run lint, npm run tsc, and npm run build before opening a pull request.

License

MIT © Asif Ali

Resources

• Figma Widget documentation
• Figma Community widget