Buttery smooth performance
Thousands of layers stay smooth as you pan, zoom, and edit powered by a custom WebGL pipeline.
Import any part of any app onto the canvas.
Claude
Open AI
Grok
Qwen
Gemini
Kimi
Deepseek
Minimax
Use with ChatGPT or Claude subscription, add API keys or connect via MCP, WebMCP or CLI.
Design with agents directly on the canvas. Refine manually or fire up agents.
Open any page inside the app and import it straight onto the canvas.
Vibe Shaders. Create stunning visual effects with shaders.
Vibe Shaders.
Create stunning visual effects with shaders.
Visual effects powered by real-time shaders gradients and textures at your fingertips.
Draw paths, edit curves, and paste SVG code straight into your designs with ease.
AI Pen. Draw icons and illustrations with agents.
AI Pen.
Draw icons and illustrations with agents.
Share component sets across files and keep every project in sync.
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.
Edit linear, radial, angular and mesh gradients right on the canvas.
Elevate your work with built-in industry standard design skills.
Directly export any frame as HTML
and CSS/Tailwind in 1-click.
Send a link and anyone can open the latest version in their browser.
Feel like at home.
Import .fig files with layouts, styles and images. Or just copy/paste from Figma directly.
Copy any webpage in Chrome.
Paste to the canvas as editable layers.
Import any webpage as editable layers via built-in browser.
Create reusable symbols with overrides
and combine them in complex layouts.
Edit linear, radial, angular and mesh gradients
right on the canvas.
Name your colors, spacing and type once
and reuse them everywhere.
Share component sets across files and keep
every project in sync.
Reserve space inside a component for content
each instance fills in.
Resize a group, its text, strokes, radii and effects
all scale along with it.
Hover to read exact distances between any two layers on the canvas.
Fill container, hug content, position absolutely,
align to edges.
Background blur, drop shadow and layer blur, stacked in any order.
Export any frame as PDF, PNG, JPEG or WEBP at the exact size you need.
Layers snap to edges, centers and equal spacing while you drag them.
Design your icons and logos precisely. Snap
to pixels and half-pixels when drawing.
Reorder, hide, group, rename, and select any layer with full control.
Build great looking slidedecks, organize them
in Slides view, and present like a pro.
It's just a JSON file that allows agents to work with
it natively. Schema fully opened. See docs.
Design with agents, refine every detail on canvas,and ship it back to code.