Code Editor Pro

A Figma widget for editing and displaying code with syntax highlighting.

Features

• 🎨 Syntax Highlighting: Supports multiple programming languages with color-coded syntax (JavaScript, TypeScript, Python, HTML, CSS, JSON, REST, SQL, Markdown, XML)
• 🌓 Theme Support: Toggle between light and dark themes
• ✏️ Full-Featured Code Editor: Click to open a CodeMirror-based editor with line numbers, bracket matching, and auto-completion
• 💾 Real-time Sync: Changes in the editor sync back to the widget instantly with debouncing for performance
• 🎯 Smart Width Adjustment: Widget automatically adjusts width based on code content
• ⚡ Performance Optimized: Debounced updates and efficient rendering

Installation

1. Clone this repository
2. Install dependencies:

   npm install

3. Build the widget:

   npm run build

4. In Figma, go to Plugins → Development → Import plugin from manifest
5. Select the manifest.json file from this project

Development

# Build everything
npm run build

# Build widget only
npm run build:widget

# Build UI only
npm run build:ui

# Type check without building
npm run tsc

# Lint code
npm run lint

# Fix lint issues
npm run lint:fix

# Watch for changes (auto-rebuild)
npm run watch

Usage

1. Add the Code Editor Pro widget to your Figma canvas
2. Click a code block to open the editor
3. Write or paste code and choose language
4. Close editor to sync changes automatically

Tech Stack

• Figma Widget API
• TypeScript
• esbuild
• CodeMirror 5

License

MIT License © Asif Ali

Resources

• Figma Widget Documentation
• Figma Widget Setup Guide
• TypeScript Documentation

Author

Created with ❤️ for Figma by Asif

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.