Fanta docs
Guides

Design-to-code with .fnx

Edit design source and let the canvas reload.

A Fanta page is .fnx source under pages/; a standalone component master is under components/<slug>/master.fnx, and a variant master is under components/<set>/<variant>/master.fnx. Canvas operations autosave into those files, and valid file edits in your own code editor reload the open canvas.

In Fanta's Code workspace, choose the active page or component's FNX or companion JSON tab. Save canvas changes before editing source. A dirty source buffer temporarily locks canvas editing; Save validates and applies source, refreshes the editor and canvas, and preserves source Undo history. If both source buffers have drafts, Save processes each before releasing the canvas. Find searches the active buffer; Discard draft reloads only the selected buffer from disk. Resolve an on-disk conflict before saving, and finish a source operation before starting another.

Canvas saves preserve authored FNX comments and source attributes on surviving nodes, including attributes this editor version does not understand. If deleting a node or changing its type would lose a source-only attribute that canvas Undo cannot restore, persistence reports a preservation error. Undo the canvas edit, or intentionally remove the attribute in FNX and validate the complete source before trying the canvas operation again. A change visible on canvas is not yet a saved project change.

  1. Use get_editor_state to find the source path. read_fnx_source lists files and pages text; its offset is a 1-based line number. Follow truncated and next_offset when reading large files.
  2. Edit a complete .fnx candidate with ordinary file tools, keeping its syntax well formed. Call validate_fnx_source with the project-relative path and complete candidate before writing. Managed JSON files, including fanta.json and *.ids.json identity sidecars, can also be edited after inspecting their schema. Preserve existing identities and validate the complete project candidate before saving. For renaming or restructuring components and variant sets, use the editor or batch_design operations; manually changing a def.json, set.json, or component folder can break name-based page references.
  3. Save, let Fanta reload and finish any computed layout write, then call get_editor_state and get_screenshot to confirm the result. If the canvas reports a source conflict, resolve it before continuing canvas edits.
  4. Review and commit the Git diff.

.fnx is design source, not a promise of production React export. The current external MCP server has no export_jsx tool; implement application code in your own project.