--- title: "Visual Editor" description: "How Canvas, Preview, the Navigator, the Inspector, and document actions work together." canonical_url: "https://nyxel.dev/docs/editor" markdown_url: "https://nyxel.dev/docs/editor.md" --- # Visual Editor URL: /docs/editor LLM index: /llms.txt Description: How Canvas, Preview, the Navigator, the Inspector, and document actions work together. # Visual Editor The editor is a standalone Svelte application. It connects to a storefront over HTTP, loads its component registry and JSON documents, and edits those documents through a typed action API. ![Nyxel editor showing a product page Canvas, page tree, and section Inspector.](/site-media/editor-composer.png) ## The everyday workflow Choose a template, select a node in the Navigator or Canvas, then change its settings in the Inspector. The active page is split into Header, Template, and Footer so shared shell content remains separate from route content. Canvas starts with desktop and mobile artboards on a wide screen. Each artboard header opens a resolution menu with desktop, laptop, tablet, and phone presets; removal is the final destructive action in that menu. Circular controls before, between, and after the artboards insert another frame, briefly highlight it, and provide a timed quick-remove state. Adding and removing frames animates both layout reflow and the bounded viewport, with reduced-motion support. A compact minimap shares one surface with recenter and zoom controls. On a constrained editor viewport the Navigator or Inspector appears in a bottom sheet. Canvas pages grow to the height of their rendered sections; the editor stage supplies pan and zoom instead of placing an independent storefront scrollbar inside each artboard. Selection outlines and labels use the editor accent color. Canvas remains selectable while the Inspector is available. Preview disables editing controls because it represents the interactive storefront, not an editable overlay. In the Editor view, the Preview control also owns responsive inspection: click it again to switch the live route between desktop and mobile widths. The Library keeps a separate resizable layout control for isolated component work. ## Canvas rendering The editor owns the current Yjs drafts and projects them to JSON for every render request. The storefront’s development render endpoint composes that snapshot with the same Astro runtime used by public routes and returns HTML, CSS, asset URLs, head metadata, markers, and diagnostics. The editor installs the response into Shadow DOM. Revision numbers make the request race-safe: an older response cannot overwrite a newer edit. If rendering fails, the last successful Canvas remains visible and the editor shows the new diagnostic separately. Canvas does not hydrate storefront components. Links, submissions, and cart actions are intercepted, and the storefront snapshot uses a regular cursor rather than suggesting that those controls will activate. Node selection reads `data-nyxel-*` markers from the local DOM, so hover and click feedback do not wait for another server render. Initial renders and mode changes show a preparation state; later render requests keep the last successful Canvas visible while an update indicator reports the pending resolution. ## Preview sessions Preview loads the actual storefront route with a development-only snapshot token. Unsaved page, group, and theme changes are therefore visible before Save. Links preserve the session while the user navigates between supported routes. Preview is read-only from the editor’s perspective, but storefront interaction remains real. Selecting a node in the Navigator can focus the corresponding labeled section on the live route without adding editing controls to Preview. The focus treatment clears sticky storefront chrome, then disappears when Preview is opened without a selection. Product options, add-to-cart, collection filters, search, and other hydrated behavior should be verified there. ![Nyxel Preview focused on the section selected in the Navigator while the storefront route remains interactive.](/site-media/editor-preview-focus.png) ## Documents, actions, and undo Header, page, footer, and theme settings each have a local Yjs document. They keep separate persistence boundaries while an editor session coordinates selection, rendering, and save state across them. Every UI mutation and agent tool goes through the same `DocumentAction` dispatcher. Actions validate component settings, region acceptance, node existence, and capacity constraints before opening a transaction. One user or agent command becomes one undoable transaction. Loading, restoration, and system synchronization do not enter local undo history. Save serializes ordinary template and theme JSON. Raw Yjs updates are not the durable project format. ## Editor integration boundary `@nyxel/editor` is a portable library. It receives registry data, templates, theme settings, a Canvas renderer, source context, and persistence callbacks. It does not import theme components, Astro virtual modules, or storefront routes. `apps/editor` is the host application that wires those dependencies to the local storefront. In the partial Nyxel Connect flow it can exchange a one-use handoff, use a project-scoped Canvas renderer, and surface a review release without receiving provider credentials. A hosted platform can replace the development HTTP handlers without changing the editor component model. ## Sitemap See the full [sitemap](/sitemap.md) for all pages. Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md). Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).