> ## 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. # Visual editor > Edit your Archie app visually with element inspection, point-and-click property editing, and live preview updates. 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) Visual editor with element selected and inspector panel open ## 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](/features/frontend/talking-to-archie)** — multi-step or cross-file changes, logic adjustments * **[Blueprint](/features/blueprint/overview)** — 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](/features/frontend/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](/features/backend/overview) console. For these cases, switch to the [chat](/features/frontend/talking-to-archie) or the IDE.