Buttery smooth performance
Files with thousands of layers stay smooth as you pan, zoom and edit thanks to a custom-built WebGL rendering pipeline.
Drift
Echo
Flare
Nova
Onyx
Nova
Never start
from scratch.
Import any part of any app onto
the canvas.
Made in pen.dev.
Bring any model to the canvas.
Use with ChatGPT or Claude subscription, add API keys or connect via MCP, WebMCP or CLI.
Claude
Open AI
Grok
Qwen
Gemini
Kimi
Deepseek
Minimax
Design with agents directly on the canvas.
Refine manually or scale up with agents.
HTML import
Components
Figma import
Open format
Built-in browser
Open any page inside the app and import it straight onto the canvas.
Vibe Shaders. Create stunning visual effects with shaders. Explore multiple variations with agents.
Real shaders, right on the canvas. Drop a GLSL fill into any frame, tweak its uniforms like layer properties.
Shaders
Visual effects powered by real-time shaders gradients and textures at your fingertips.
Variables
Snapping
Chrome extension
Slots
Pen tool
Draw paths, edit curves and paste SVG straight in.
AI Pen. Draw icons and illustrations with agents.
Tell AI Pen what you need and watch it draw every path lands as native vectors you can bend and restyle.
UI Libraries
Share component sets across files and keep every project in sync.
Measurements
Layers panel
Effects
Pixel grid
Familiar shortcuts
The shortcuts you know from Figma and Sketch work the same way here.
Design via MCP in addition to the on-canvas agent. Connect Claude Code, Codex, Hermes, Antigravity, Cursor or any agent to pen.dev through MCP.
You can also design headlessly with pen.dev CLI.
Gradients
Edit linear, radial, angular and mesh gradients right on the canvas.
Built-in design skills
Elevate your work with built-in industry standard design skills.
Export 1x, 2x, 3x…
Slides
HTML export
Directly export any frame as HTML and CSS/Tailwind in 1-click.
Flex layout
Scale
Share by link
Send a link and anyone can open the latest version in their browser.
The design features
you expect.
Feel like at home.
Buttery smooth performance
Files with thousands of layers stay smooth as you pan, zoom and edit thanks to a custom-built WebGL rendering pipeline.
Pen tool
Draw paths, edit curves and paste SVG straight in.
Shaders
Visual effects powered by real-time shaders gradients and textures at your fingertips.
Figma import
Import .fig files with layouts, styles and images.
Or just copy/paste from Figma directly.
Built-in browser
Open any page inside the app and import it straight onto the canvas.
Chrome extension
Copy any webpage in Chrome.
Paste to the canvas as editable layers.
HTML import
Import any webpage as editable layers via built-in browser.
Components
Create reusable symbols with overrides and combine them in complex layouts.
Gradients
Edit linear, radial, angular and mesh gradients right on the canvas.
Variables
Name your colors, spacing and type once and reuse them everywhere.
HTML export
Directly export any frame as HTML and CSS/Tailwind in 1-click
UI Libraries
Share component sets across files and keep every project in sync.
Component Slots
Reserve space inside a component for content each instance fills in.
Familiar shortcuts
The shortcuts you know from Figma and Sketch work the same way here.
Scale
Resize a group, its text, strokes, radii and effects all scale along with it.
Measurements
Hover to read exact distances between any two layers on the canvas.
Flex layout
Fill container, hug content, position absolutely, align to edges.
Effects
Background blur, drop shadow and layer blur, stacked in any order.
Export 1x, 2x, 3x…
Export any frame as PDF, PNG, JPEG or WEBP at the exact size you need.
Built-in design skills
Elevate your work with built-in industry standard design skills.
Snapping
Layers snap to edges, centers and equal spacing while you drag them.
Pixel grid
Design your icons and logos precisely. Snap to pixels and half-pixels when drawing.
Layers panel
Reorder, hide, group and select any layer.
Slides and Presentation mode
Build great looking slidedecks, organize them in Slides view, and present like a pro.
Share by link
Send a link and anyone can open the latest version in their browser.
Open design format .pen
It's just a JSON file that allows agents to work with it natively. Schema fully opened. See docs.
This list goes on and on and on…
Killer performance. 10000 photos, 10GB of content, 60fps, no problem.
Start building
your ideas today.
Design with agents, refine every detail on canvas,and ship it back to code.
Download pen.dev