Centinadocs

Centina documentation

Centina is a prototyping canvas where everything you draw is real HTML and CSS — boxes are real divs, layout is genuine flexbox and grid, and the browser is the layout engine. These pages cover the editing surfaces, the agent tooling, and how to run it.

Guides

  • Grid & subgrid — the user-facing tour of the grid editing surface: canvas chrome, inspector track strips, placement, subgrid.
  • Grid reference — the architecture behind it: two synchronized surfaces, boundary-drag math, the degradation ladder.
  • Spacing tokens — the canvas-level spacing scale and how fields bind, preview, scrub, and detach.
  • Content scaling — shift+corner proportional scaling: what rides the factor and what stays put.
  • Constraints — per-axis resize anchors, stored and emitted as native CSS insets.
  • Present — the view deck: saved camera framings played back in order over the live canvas, chrome away.
  • Flows — connector arrows between boxes: wireflows with labels, YES/NO chips, and gesture icons riding the line.
  • Wiremaps — plan a site as a forest of page cards with labeled sections: place cards by hand, grow self-arranging trees under the ones that want structure, bound to a form factor and dressed from the Wireframes gallery.
  • Wireflows — the same maps used flow-first: hand-placed screen cards wired with interaction arrows, decision diamonds that branch, and gutter-routed elbows that never cross a card.
  • Context — lightweight freeform groups where shared membership is the relationship: keep a wiremap card and the mock that realizes it findable from each other forever.

Components

  • Components — the full reference: reify a box into a component, the canvas's library and its live-DOM previews, linked instances and customizations that survive updates, tags, the provenance trail, and design→code links.

Agents & capture

  • MCP server — agents as first-class editors: live read and write access to the open canvas from any MCP client.
  • Centina Compass — the capture extension: lift an element, or a whole page, off any live site and paste it into Centina as editable boxes.

Running it

  • Self-hosting — the standalone-binary playbook: install (curl -fsSL https://get.centina.build/install.sh | bash), local use, LAN sharing, ports, security boundaries, troubleshooting.
  • Centina desktop — the macOS app: a window over the same Centina at a fixed address (localhost:8462), and the Agent capsule that hands your agent its connection command.
  • License — the Free Binary License 1.0 the binaries ship under.