A website builder with reusable styles, structured editing and a framework-based export path.
This website builder case study covers a tool designers use to compose responsive pages and control the styles behind them. A project records the layouts, the breakpoints and the interaction states. It also records the reusable style sources. A command-line export then turns that saved work into framework files, styles and assets.
We connected the visual editing to the code generation. That way, both sides read the same styling decisions for a page.
The challenge
One element can inherit a value from a shared style, override it locally and change it again at another breakpoint. A designer needs to know which rule they are editing. The exported page then has to follow that same order of precedence when it renders.
Continuous controls need a different kind of care. Dragging a slider should preview every movement, yet the final adjustment should land as one undoable change.
What we built
The workspace brings together a component navigator, an asset library and responsive controls. It keeps design and content in separate modes. The style panel shows where a value comes from and flags when another rule overrides it.
Variables and resource loaders connect pages to external data. Markdown and JSON cover file-based content. Page metadata travels with the project, and the export carries it alongside the page components and styles.
Keep previews separate from committed edits
A temporary CSS layer updates the canvas while a control is dragged. Releasing the control commits the final value to the saved project as a single transaction. The values in between never reach the saved history.
Components, properties and styles live in identifier-keyed maps. Patches record each change to those maps, and reverse patches make an undo possible. A save is batched against the server version the client last received. A mismatch asks for a reload. Retries and local drafts help keep unsaved work, though they do not settle the conflict on their own.
Carry the style model into the export
A declaration records its source, its breakpoint and its state, together with a typed value. Ordered style sources set the precedence between them. Shared logic resolves the cascade, the inheritance and the variables for both the editor and the compiler.
The build generates the page files, the resource loaders and the metadata. It also produces sitemaps, redirects and assets. Atomic CSS can reuse a declaration that repeats. Deployment follows the chosen export target, while managed hosting and a collaboration relay stay separate pieces of infrastructure.
Project success
A designer can inspect a style, preview an adjustment and commit or undo it before exporting the site. The resulting files carry those decisions into the client's own build workflow. Version checks make a conflicting save visible. The export then hands over code and assets that can be inspected outside the editor.
Technology stack
Builder
TypeScript, React, Remix, Vite
State and changes
Nanostores, Immer
Content editing
Lexical
Data access
PostgreSQL, Prisma, PostgREST, tRPC
Export targets
React Router, Remix, Vike
Other engagements
Recognize the pattern?
If one of these looks like your situation, the discovery call is where we find out how close.
