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.
- Use
get_editor_stateto find the source path.read_fnx_sourcelists files and pages text; itsoffsetis a 1-based line number. Followtruncatedandnext_offsetwhen reading large files. - Edit a complete
.fnxcandidate with ordinary file tools, keeping its syntax well formed. Callvalidate_fnx_sourcewith the project-relative path and complete candidate before writing. Managed JSON files, includingfanta.jsonand*.ids.jsonidentity 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 orbatch_designoperations; manually changing adef.json,set.json, or component folder can break name-based page references. - Save, let Fanta reload and finish any computed layout write, then call
get_editor_stateandget_screenshotto confirm the result. If the canvas reports a source conflict, resolve it before continuing canvas edits. - 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.