.pen Files

Every design you create in Pencil lives inside a .pen file. These files are JSON-based, version-control friendly, and fully portable — meaning you can move them between machines, share them with teammates, or check them into any Git repository without losing a single detail.

Creating .pen Files

There are two ways to create a new .pen file depending on your workflow:

From the IDE

Create a new file in your project and give it the .pen extension. Pencil will automatically recognize and index it.

From the Desktop App

Use the menu or keyboard shortcut to start a fresh design:

Opening .pen Files

Opening an existing design is straightforward:

• Double-click the .pen file in your system file manager to launch it in the Desktop app.
• Open in your IDE to view or edit the underlying JSON directly.

Saving .pen Files

Save your work at any time with the standard shortcut:

Pencil does not auto-save yet, so remember to save manually. We strongly recommend using Git alongside your saves so you always have a recoverable history of every change.

Best Practices

• Save frequently — don’t rely on memory; hit Cmd/Ctrl+S often.
• Commit regularly — treat design files the same way you treat source code.
• Keep .pen files alongside code — colocating designs with the components they describe makes navigation intuitive.
• Use descriptive names — a name like sidebar-nav.pen is far more useful than untitled-3.pen.