Welcome to Pencil Docs
Pencil is a powerful vector design tool that integrates directly into your development environment. Instead of switching between separate design apps, you design right inside your IDE.
Why Pencil?
Most creative workflows force you to jump between a standalone design application and your code editor. Every round-trip costs time and introduces drift between what you designed and what you shipped. Pencil bridges that gap by bringing a full vector design surface directly into the tools you already use every day. Designs live alongside your source code, version-control diffs are meaningful, and exporting to production-ready assets is a single command away.
Quick Links
Getting Started
Install Pencil in your IDE and create your first design file in minutes.
Core Concepts
Understand .pen files, layers, the canvas, and how Pencil organizes your designs.
Design & Code
Turn your designs into production-ready code with built-in export workflows.
For Developers
Dive into the .pen format, the plugin API, and advanced integration patterns.