Hexby: Codebase into a visual canvas

Hexby reads the project and lays out every page, layout and component as a map, connected by what actually renders what. The layout is deterministic, so the same project always draws the same map and the team can learn where things live. Zoom out for the shape of the whole project; zoom in and every node shows the screen it renders, named, with the kind it is. Changed files pick up a git status border, so the map also pictures work in progress.

Pick a page and the canvas draws it together with its whole dependency closure. A shared component appears under every parent that uses it but resolves to one record, so before anyone changes anything they can see everywhere it would land.

Every component in the project on one free canvas, with project-wide search, filtering by kind, and sorting. Zoom in and the cards become the real components — live and clickable — so the team can hover them and try their states without leaving the canvas.

Isolates a single component in the middle of the canvas with Desktop, Tablet and Mobile breakpoints, and a resizable code dock below it showing that component’s source. When the component has a companion stylesheet, the dock splits so markup and styles sit side by side.

A file tree, a tabbed editor, git decorations, and project-wide search and replace — case, whole word, regular expressions, and include or exclude globs. It stays mounted while you move around the workspace, so tabs and scroll position are still there when you come back.

Hexby starts the project’s own dev server and frames the running app, with an address bar that drives its real history, route autocomplete from the analysis, and Desktop, Tablet and Mobile viewports. The Inspect dock is where someone who does not write code gets to work: a live layers tree, controls for colour, typography, spacing and layout, and a Content tab for editing the words on the screen.

Ask the agent to build, edit, or refine components. Select something on the canvas and it comes along as context, so the agent knows exactly which file you mean. Paste an image, run a slash command, or dictate. Answers come back as plans, diffs and permission cards you approve — nothing is written to the project without a yes.