2-minute overview
See the core editing workflow in two minutes.
A quick look at editing rendered text, moving declared sections and reviewing changes before they reach the source.
Astro Dev Toolbar editor · Open source
Astro Visual Editor
The Astro Visual Editor edits text and metadata from the rendered page, then reviews and commits approved changes to Astro source files.
Visual Editor Connected Change ledger3 ready to review Batch 01
- Text Hero headingsrc/pages/index.astro Previewed
- Section Reordered 3 sectionsreview → preview → commit Queued
- SEO Meta descriptionsrc/pages/index.astro Validated
Watch the editor in use
Start with the overview or follow the full tutorial.
Both videos use the real Astro integration and show the visible review step before any source file is changed.
Complete tutorial
Follow the full integration and editing process.
The complete tutorial covers setup, text and SEO editing, section controls, page layouts, review and recovery.
The review loop
How the Astro Visual Editor queues changes, then writes once.
The browser remains the shared context. The source file changes only after the full batch has been checked and deliberately committed.
See the result before it writes.
Click editable text or use the toolbar. Each proposed change appears on the page first.
Review every proposed source change in one queue.
The queue records the old value, new value, edit type, and expected source file.
Validate the whole batch.
One deliberate action checks and writes every update, or leaves the source untouched.
Real editor screens
Inspect the interface and its safety controls.
Select any screenshot for a larger view of the section tree, page metadata editor or local recovery history.
View larger ↗ 
View larger ↗ 
View larger ↗ What it edits
Visual editing for Astro without hiding the source.
01
Rendered text
Click, preview, and queue content in place.
Exact file annotations, route context, and structured paths identify where content is owned. Ambiguous expressions stop with a clear error instead of guessing.
Sections
Drag and drop within safe, declared regions.
Reorder, add, and delete sections with pointer, keyboard, or explicit move controls. The review ledger records section changes alongside text and SEO edits.
SEO
Edit the page head without hunting for it.
Page title, description, canonical URL, Open Graph data, robots, and keywords use the same preview and review transaction.
04
Source adapters
Edit Astro, Markdown, JSON and YAML sources.
Syntax-aware adapters target literal values and exact structured paths while preserving comments and surrounding file structure where the format supports them.
ASTRO.astroLiteral text, frontmatter, and declared sections MD.md / .mdxFrontmatter fields with precise source paths .json / .jsoncStructured values while retaining JSONC comments YML.yaml / .ymlNested data selected by an exact document path
Local development controls
Development-only editing with guarded source writes.
The editor checks the source, validates each change and writes the reviewed batch atomically.
- 01Hash and stale-source conflict checks
- 02Compiler and structured-data validation
- 03Atomic writes with receipt-backed revert
- 04Path, extension, size, and symlink controls
- 05Network-exposed development writes blocked
Open-source project
Review the source, documentation and tests on GitHub.
The public repository includes the integration guide, supported source formats, safety controls and automated tests for the editor workflow.
Public GitHub repository
README Setup and editing workflow
SOURCE Astro, Markdown, JSON and YAML adapters
TESTS Parsing, validation and safe writes
LICENCE MIT open-source licenceQuestions before installing
Scope and safety, in plain English.
Does it run on a live production website?
No. Astro Visual Editor is built for local development. Production builds contain no public write route or editor client bundle.
Can I drag a section anywhere on the page?
You can move, add, or delete sections inside regions a developer has declared editable. That boundary keeps source updates predictable and prevents unrelated page structures from being changed by accident.
Does it replace a CMS?
Not in every project. It suits source-controlled Astro sites where editors need a direct, reviewable way to make bounded changes. A team with permissions, publishing workflows, or a large content operation may still need a full CMS.
Where should I report a problem?
Use the public GitHub issue tracker with the Astro and Node versions, a small reproduction, and the result you expected.
Created by Opace Digital Agency
Need more than the editor?
It is created and maintained by Opace Digital Agency's Astro development team. If you need a wider website project, see the web design services provided by Opace or get in touch.
Built in Birmingham for teams everywhere