pen.dev Documentation

Quick Links

• Getting Started - Your first steps with pen.dev
• Core Concepts - Understanding .pen files and components
• Design and Code - Syncing design with your codebase
• Troubleshooting - Common issues and solutions
• For Developers - Technical information

What is pen.dev?

pen.dev is a powerful vector design tool that integrates directly into your development environment. Design right inside your IDE alongside your code, or use the standalone desktop app or headless CLI.

Why pen.dev?

pen.dev bridges the gap between design and development by putting both in the same environment. Design components, sync them with your code, and let AI assistants help you maintain consistency between design and implementation.