Problem
Design the frontend of a website builder like Wix, Squarespace or Webflow. Users start from a template, drag elements (text, images, buttons, galleries, forms, video) onto a page, edit content and styles in a side panel or directly on the page, adjust the design separately for desktop, tablet and mobile, and publish a live site.
The editor must feel instant (dragging and resizing at 60fps) and never lose work. The published site must look exactly like the editor, load fast and rank well in search engines.
Discussion areas
- Data model: represent the site as a JSON tree of nodes (
type,props,styles,children) instead of HTML; flat storage by id; per-device style overrides; theme tokens. - Architecture: the editor app vs the published static site, and one shared renderer so what you see is what you get; a component registry for element types.
- Canvas: why the site is rendered inside an iframe; selection boxes and resize handles on an overlay; converting pointer coordinates between the editor and the iframe.
- Editing: every change as a command (
insertNode,moveNode,updateStyles, ...) to get undo/redo, autosave and validation in one place. - Drag and drop performance: keeping drag and resize smooth on large pages.
- Saving: autosaving only the changes, a "Saving... / Saved" status, and the same site open in two tabs.
- Publishing: fast, SEO-friendly published sites served from a CDN.
- Security and accessibility: isolating user content and custom code; keyboard-friendly editing.