The Fanta field guide

Your design.
Your source.

A native design canvas backed by files you own. Work visually, edit FNX, and review every change with Git. Bring an agent into the same live design when you need a hand.

Start designing Explore the editor screens

Apple Silicon macOS alpha. See the installation guide for the available build and requirements.

The real Fanta editor: native Launch Card layers on the left, an editable canvas in the center, and the selected button's inspector on the right. — Captured in Fanta 1.0.0 Public Alpha · October 13, 2026Layers, Variables, Motion, and more

Canvas → FNX → Git

One design, from idea to diff.

Explore all capabilities

Fanta canvas with the Launch Card, native layers, and design inspector.

Make it on the canvas

Draw, arrange, and refine native layers. Use the inspector for type, fills, layout, and reusable components.

Read the guide

Fanta Code workspace showing the Launch Card page as FNX source.

Open the source

FNX describes the same design as readable text. Save a valid source edit and the canvas updates.

Read the guide

Fanta Review Changes showing a real Git diff of the Launch Card FNX.

Review the change

See which properties changed, keep a history, and review the design alongside the rest of your project.

Read the guide

A format for your design

What is FNX?

FNX is Fanta’s readable design source format. It describes frames, text, shapes, and their properties in a static JSX-like syntax. The canvas and the source are two views of that design.

FNX describes the artwork; it does not execute an application. A complete project keeps shared data, identity files, and media beside it.

Understand FNX

pages/fanta-studio/page.fnxOne text edit

<Text
  id="01M4PFJPB3RFR3DZY6B7XDDWJV"
  name="CTA Label"
  content="Explore Fanta"
/>

A shortened node example. Preserve its existing ID, save valid source, then inspect the canvas.

Work with an agent

The same canvas.
Another pair of hands.

Fanta’s local MCP bridge lets agents inspect layers, make focused edits, read FNX, and check screenshots. Review the result in the editor and Undo a successful batch as one step.

Connect Claude Code or Codex

Fanta canvas after the recorded MCP agent edit, showing the Explore Fanta button and Your canvas. Your source. helper text. — The result of an external agent’s recorded MCP edit. Watch its inspection and Undo/Redo in the agent demo.

Explore the editor

Your design.
Your source.