AstroCanvas£5 / month

Astro WYSIWYG editor

Visual editing that respects the Astro source.

AstroCanvas is a local Astro WYSIWYG editor for changing selected page copy in context. It is designed for the part of visual editing that should be simple: click marked text, change it and save a clean diff back to the original .astro file.

Try the visual editor demoSee £5 pricing

What “WYSIWYG” means for an Astro project

A conventional WYSIWYG editor owns a rich-text document and turns toolbar choices into HTML. An Astro website is different. Its pages can combine components, JavaScript expressions, content collections and data from external services. Treating all of that as a loose HTML document would make edits difficult to review and easy to break.

A useful Astro WYSIWYG workflow should therefore show the real page while preserving the codebase as the source of truth. AstroCanvas edits only content a developer has deliberately marked as writable. The page provides the visual context; the repository keeps ownership of the result.

The source file is the content store

AstroCanvas does not copy page content into a hosted database. When a supported change is saved, the original literal text in the Astro component changes. Git can review it, the normal build can validate it and the existing deployment workflow can publish it.

<h1 data-astrocanvas="hero-heading">
  A clearer page heading.
</h1>

This is deliberately narrower than a page builder. It avoids generated layout code, a second content model and a production editing service that needs authentication, permissions and maintenance.

How a safe visual edit works

  1. A developer adds a unique data-astrocanvas ID to literal text.
  2. AstroCanvas appears in the Astro development toolbar during the local dev command.
  3. The editor selects the marked element and previews new wording on the actual page.
  4. AstroCanvas verifies that the target is unique, literal and inside the allowed source directory.
  5. The integration makes one atomic change to the original file.

What stays read-only

Dynamic expressions, nested HTML, duplicate IDs and unsafe file paths remain visible but cannot be written by the first release. A visual editor should not pretend every rendered value can be safely traced back to one editable string. When AstroCanvas cannot prove the edit is safe, it does not save it.

When an Astro CMS is still the right choice

Use a full CMS when editors need remote logins, scheduled publishing, roles, media libraries, structured collections or content shared across several channels. Use AstroCanvas when a developer owns the project and wants visual page editing without introducing a separate content platform.

The lightweight Astro CMS guide compares those boundaries in more detail. If you already have the paid package, continue with the getting started guide.