Design on canvas. Land in code.
Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE. No more context switching.
Works with your favorite IDE
Try the Pencil Editor
Click to open →
Everything you need to design in code
Pencil bridges the gap between design and development by putting both in the same environment.
Design in Your IDE
A powerful vector design tool that integrates directly into your development environment. No more switching between apps.
Design as Code
Every design is stored as a .pen file — human-readable, version-controllable, and seamlessly integrated with your codebase.
Components & Variables
Use reusable components and design variables that stay in sync between your design canvas and production code.
AI Integration
Generate and iterate on designs using AI prompts. Pencil brings the power of generative design directly into your workflow.
Styles & UI Kits
Import and use design styles and UI kits. Bridge the gap between design and development by keeping everything in one place.
Cross-Platform
Available as a desktop app for macOS, Windows, and Linux — plus IDE extensions for Cursor, VS Code, Windsurf, and more.
How it works
Three simple steps to bridge design and code
Install the Extension
Add Pencil to Cursor, VS Code, or download the desktop app for your platform.
Design on Canvas
Open a .pen file and use the full-featured vector canvas to create your designs.
Ship as Code
Your designs are stored as code, version-controlled, and ready for production.
Ready to design in your IDE?
Pencil is currently free during early access. Try the editor right in your browser or download it for your IDE.