See the result before it writes.
Click editable text or use the toolbar. Each proposed change appears on the page first.
Astro Visual Editor by Opace Open source · Development only · Source aware
Astro Visual Editor: Change Text, SEO & Drag & Drop Sections in the Front-End
Work from the rendered page, preview each edit, and commit a reviewed batch to your Astro source files. Text, metadata, and declared page sections share one visible change queue.
Planning an Astro website? See Opace Astro development- 4source families
- 1reviewed transaction
- 0production write routes
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
The review loop
Make a queue of changes. Write once.
The browser remains the shared context. The source file changes only after the full batch has been checked and deliberately committed.
One ledger for every source.
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.
What it edits
Visual editing 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
Four source families. One review model.
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
A deliberately local editor
The editing layer stays out of production.
No public write route, no production editor bundle, and no silent fallback.
- 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 refused
Release candidate
The package is prepared for public beta.
The code, integration metadata, documentation, tests, and release workflow are in the public
repository. The @opacedev/astro-visual-editor npm page will become the install
route after the first package publication is confirmed.
After npm publication
$ npx astro add @opacedev/astro-visual-editor@beta
✔ Update astro.config.mjs
✔ Run astro dev
✔ Open Visual Editor in the Dev ToolbarQuestions 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