# Docs

- [Fanta documentation](/docs): Learn Fanta's current alpha: canvas editing, source-backed projects, agents, generation, export, and Git.
- [How Fanta works and what it can do](/docs/capabilities): A source-grounded map of Fanta's editor, design system, source files, agents, media, motion, handoff, and current limits.
- [Fanta vs Figma](/docs/fanta-vs-figma): Compare a local design-as-source workflow with Figma's collaborative cloud workflow.
- [Roadmap and current limits](/docs/roadmap): What Fanta supports today, which improvements are being validated, and the longer-term directions in its source specifications.
- [Inside the app](/docs/screenshots): A visual tour of Fanta’s real Layers, Variables, layout, components, FNX, Motion, and Prototype screens.
- [Demos and examples](/docs/demos): Watch an AI-assisted Airbnb recreation and try native editing, FNX, Git, and agent workflows in Fanta.
- [Brand and assets](/docs/brand): Fanta's F mark, app icon, typography, and the visual identity used in these docs.
- Getting Started
  - [Getting Started](/docs/getting-started): Install Fanta, create a source-backed design, and connect an agent.
  - [Install & Build](/docs/getting-started/install): Install the non-Store macOS alpha, build from source, and understand Store build limits.
  - [Your First Project](/docs/getting-started/first-project): See how a canvas edit becomes FNX source and a Git diff.
  - [Connect an Agent](/docs/getting-started/connect-an-agent): Connect Claude Code or Codex to the open Fanta canvas through local MCP.
  - [Quickstart: Claude Code](/docs/getting-started/quickstart-claude-code): Make and inspect one source-backed design change through MCP.
- Core Concepts
  - [Concepts](/docs/concepts): The ideas behind Fanta documents, canvases, components, variables, and prototypes.
  - [Document model](/docs/concepts/document-model): How Fanta stores projects, pages, layers, components, assets, and revisions.
  - [Pages and coordinates](/docs/concepts/pages-world-space): Organize canvases and understand positions in Fanta.
  - [Auto layout](/docs/concepts/auto-layout): Arrange children with frame layout controls.
  - [Variables](/docs/concepts/variables): Define reusable values, modes, aliases, and property bindings.
  - [Components and instances](/docs/concepts/components): Reuse a master design and manage local overrides.
  - [Vectors, icons, and SVG](/docs/concepts/vectors-icons-svg): Draw paths, edit nodes, and export vector artwork.
  - [Prototyping](/docs/concepts/prototyping): Add interactions and present a design.
  - [FNX design as source](/docs/concepts/fnx-design-as-source): Understand FNX, the readable design source behind Fanta's canvas, and edit either view of your project.
- The Editor
  - [Editor](/docs/editor): Navigate Fanta's canvas, workspaces, modes, and panels.
  - [Tools](/docs/editor/tools): Select, draw, edit, and navigate on the Fanta canvas.
  - [Inspector](/docs/editor/inspector): Edit selected layers and export designs.
  - [Project Assets](/docs/editor/assets): Keep generated and existing media in a Fanta project and place it on a page.
  - [Editor surfaces](/docs/editor/surfaces): Use the canvas, Layers panel, Variables workspace, Code workspace, and presentation view.
  - [Motion](/docs/editor/motion): Animate layers with clips, keyframes, playback, and time-linked comments.
  - [Dev mode](/docs/editor/dev-mode): Inspect saved artwork and leave page-bound implementation notes.
  - [Comments](/docs/editor/comments): Discuss a design with page pins, threads, attachments, mentions, and motion time links.
  - [Settings and build differences](/docs/editor/settings): Configure the editor, agent models, MCP connections, account, and privacy controls.
  - [Keyboard shortcuts](/docs/editor/shortcuts): Common macOS canvas shortcuts in Fanta.
- MCP Server
  - [MCP Server](/docs/mcp): Thirteen tools connect external agents to the focused Fanta design.
  - [Connect an agent](/docs/mcp/connect): Launch the stdio bridge to the running editor.
  - [The build loop](/docs/mcp/build-loop): Inspect, edit, verify, and review a source-backed Fanta design.
  - [Get the best output](/docs/mcp/best-output): Practical rules for reliable agent changes.
  - [Custom rules & project context](/docs/mcp/custom-rules): Keep design conventions beside the project source.
  - [Troubleshooting](/docs/mcp/troubleshooting): Diagnose connection, large results, and source reload issues.
- Agents & AI
  - [Agents & AI](/docs/agents): Use the in-app Agent Panel, local MCP tools, and hosted generation to work with Fanta designs.
  - [Agent workflows](/docs/agents/workflows): Connect an external agent to Fanta's local MCP server and make visible, validated design changes.
  - [Design from a reference](/docs/agents/reference-grounded): Use screenshots, existing nodes, and measured constraints to guide an agent's design work.
  - [Review and revision](/docs/agents/review-revision): Inspect an agent's design changes and iterate with screenshots, source files, and undo.
  - [Media generation](/docs/agents/media-generation): Generate, preview, save, and place hosted image, video, audio, and vector results.
  - [In-app AI](/docs/agents/in-app-ai): Work with an agent from Fanta's Agent Panel and follow changes on the canvas.
- Claude Plugin & Skills
  - [Claude Code plugin](/docs/plugin): Install Fanta's optional Claude Code plugin for the local stdio MCP bridge.
  - [Plugin skills](/docs/plugin/skills): The design, verification, and component skills in the Fanta Claude Code plugin.
  - [Agent recipes](/docs/plugin/recipes): Example requests for the Fanta Claude Code plugin and current local MCP tools.
- Tool Reference
  - [Tool Reference](/docs/tools): The thirteen external MCP tools and typed operations in batch_design.
  - [Create, insert & arrange](/docs/tools/create): Create and organize nodes through batch_design.
  - [Auto-layout, transform & viewport](/docs/tools/layout): Use Fanta’s current layout and transform operations.
  - [Style, typography & design tokens](/docs/tools/style-variables): Apply styles and create reusable variables with modes and bindings.
  - [Components, instances & variants](/docs/tools/components-instances): Promote masters, combine variants, expose properties, and place linked instances.
  - [Read, query & debug](/docs/tools/inspect): Inspect the open project and page tree without mutating them.
  - [Export & visual verification](/docs/tools/verify): Use PNG screenshots for MCP review and the editor UI for exports.
  - [Generation & references](/docs/tools/media): Place image bytes and understand the boundary of MCP media editing.
  - [Comments and review threads](/docs/tools/comments): Read canvas feedback and reply in the original thread.
  - [Prototyping & interactions](/docs/tools/prototype): Current MCP boundary for prototype and motion work.
  - [Version control](/docs/tools/vcs): Review and commit source-backed design changes with Git.
  - [Sessions, input & checkpoints](/docs/tools/session): Use undo batches, autosave, and Git milestones.
  - [Agent orchestration & presence](/docs/tools/agent-control): Show live agent activity and coordinate edits without a task lock.
- Guides
  - [Guides](/docs/guides): Practical workflows for the source-backed editor and thirteen MCP tools.
  - [Build a card with auto-layout](/docs/guides/auto-layout-card): Create and verify a small vertical composition.
  - [Build a component & variants](/docs/guides/component-variants): Create masters, combine variants, and customize an instance.
  - [Run a multi-agent build](/docs/guides/multi-agent-build): Coordinate agents without assuming a Fanta task-lock system.
  - [Design-to-code with .fnx](/docs/guides/design-to-code-fnx): Edit design source and let the canvas reload.
  - [Version-control your designs](/docs/guides/version-control-designs): Use Git checkpoints, branches, and source review to track and share your design changes.
- Formats & Interop
  - [Formats & interoperability](/docs/formats): Choose an editable Fanta project, a snapshot, FNX source, Figma import, or rendered export.
  - [Fanta projects and .fant snapshots](/docs/formats/fant): Understand the editable project directory, variant-set layout, and single-file snapshot format.
  - [FNX design source](/docs/formats/fnx): Learn the static JSX-like format that makes Fanta designs readable, editable, and reviewable in Git.
  - [Import from Figma](/docs/formats/figma-import): Open a .fig file and continue editing it as a native Fanta project.
  - [Export designs](/docs/formats/export): Render selected layers or a page to PNG, JPG, SVG, or PDF from Fanta.
- Reference
  - [Reference](/docs/reference): Architecture, commands, docs feeds, and alpha status.
  - [Architecture](/docs/reference/architecture): How Fanta’s app shell, design engine, source files, and MCP connect.
  - [CLI & binaries](/docs/reference/cli): Build and run Fanta, connect MCP, and validate the design loop.
  - [LLM-readable docs](/docs/reference/llms): Markdown feeds for reading this site and a separate live MCP connection.
  - [Changelog](/docs/reference/changelog): What this source-aligned Fanta documentation covers.
- Billing
  - [Pricing & credits](/docs/platform/pricing): Plans, credit packs, and paid hosted AI billing.