Compare
Knighn and Pen.dev (Pencil)
Pen.dev, which was Pencil, is a design canvas inside your IDE. Knighn is a design editor in the browser and on the Mac, where the design is already React code.
Pick Pen.dev (Pencil) when you want
- Runs inside VS Code and Cursor, beside your code.
- A WebGL canvas that stays fast with thousands of layers.
- Works with many models, not only Claude and OpenAI.
Pick Knighn when you want
- Designs are TSX with Tailwind classes, not a JSON scene that is exported later.
- A web editor and an iOS app, so you can open a design with no IDE.
- Knighn opens .pen files, and the Mac app syncs frames with Pencil.
- Agents in Claude and ChatGPT reach your designs through one hosted MCP address.
| Knighn | Pen.dev (Pencil) | |
|---|---|---|
| File format | TSX and Tailwind in one .html file that draws itself in any browser. | A .pen file: JSON with an open schema. |
| Agents | One MCP address (mcp.knighn.com) with search and execute, in the Claude connector directory. Claude Code and Codex also chat inside the editor. | An MCP server, a CLI and agents on the canvas. |
| Platforms | Web editor, Mac app (Apple silicon) and an iOS app. | A desktop app and IDE extensions for VS Code and Cursor. |
| Collaboration | Share links. No live multiplayer yet. | Share by link. |
| Code | The design is the code. Copy a frame as React or Expo. | Exports HTML, CSS and Tailwind. |
| Price | Free, or Pro at AU$9.99 a month. | See pen.dev. |
Try Knighn in your browser. No sign up is needed.
Checked on 5 October 2026 against each tool's own site. Tell us at admin@ljk.dev if something changed.