Skip to main content

Documentation Index

Fetch the complete documentation index at: https://archie.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

The visual editor is a point-and-click interface for refining your built app. Click an element in the preview, the inspector surfaces its properties, and you edit copy, styling, layout, and behavior directly.

​
Inspecting elements

Click Start inspecting in the visual editor. Then click any element in the preview to select it. Press Esc to cancel inspection. Once an element is selected, the inspector panel shows:
  • The element’s tag and identifier
  • Its position and dimensions
  • Editable text content
  • Style properties (color, spacing, typography)
  • Component context (parent component, source file)

​
Editing an element

With an element selected, you can:
  • Edit text directly in the inspector
  • Adjust styling (color, padding, font size) via property controls
  • Replace media for image and video elements
  • Open the source file for the component that produced this element
Changes apply live to the preview. You keep iterating without rebuilding.

​
When to use which modality

  • Visual editor — small visual changes, copy edits, swapping images, tweaking spacing
  • Talking to Archie — multi-step or cross-file changes, logic adjustments
  • Blueprint — adding modules, changing user types, swapping integrations, restructuring the app
If you find yourself making the same visual change in many places, capture it in theming instead — it applies consistently across the app.

​
Editing components vs. instances

Some changes apply to a single instance of a component (the dashboard page’s button), and some apply to the component itself (every button everywhere). The inspector shows which scope you are editing. Switch between Instance and Component in the inspector header. Editing the component cascades to every place it is used. Useful for design-system-level edits. Editing only the instance is useful when one location needs to differ from the rest.

​
Persistence

Edits made through the visual editor persist when they apply to component-level state and to instance-specific overrides on routed pages. The IDE shows the same files updated. When you push to GitHub, the edits travel with the code.

​
What the visual editor cannot edit

  • Server-only or background elements (computed in middleware, hydrated late) — not directly inspectable. Edit those in the IDE.
  • Logic-heavy components where the visual element is generated dynamically — use the chat or IDE.
  • Backend-side surfaces (database schema, API routes) — those live in the Backend console.
For these cases, switch to the chat or the IDE.