Astro visual editor

A visual editor for Astro websites.

AstroCanvas is a simple Astro WYSIWYG editor. Click text on your local site, edit it in place and save the change back to the real .astro file.

  • Local-first
  • Git-friendly
  • Development-only
AstroCanvas visually editing the Vela Studio Astro demo website
Writes to real .astro files

Edit Astro content on the page.

Save to real .astro files.

No CMS migration, database or hosted content.

01 / Edit

How the Astro editor works

Edit Astro sites visually.

01

Mark editable text

Add a stable AstroCanvas ID to literal text you want to edit. Dynamic expressions and nested markup stay read-only.

<h1 data-astrocanvas="hero">
  Make it clearer.
</h1>
02

Edit it on the page

Open Astro’s dev toolbar, select the text and preview the change on the actual website.

03

Save it to the source file

AstroCanvas writes one reviewable change to the .astro file. If the edit is not safe, it does not write it.

− Make it clear.+ Make it beautifully clear.

Runs inside your Astro project

Add the visual editor as an Astro integration.

Public npm package available at launch

02 / Annotate · Coming next

Pin feedback to an Astro page and send it to a developer or AI agent.

The planned annotation mode will keep each note with its route, selected element, source file, viewport and screenshot, then export the feedback as structured data and Markdown.

  • 01 Pin notes on the real Astro site
  • 02 Link notes to source where possible
  • 03 Export structured data and Markdown
  • 04 Hand feedback to a developer or AI agent
localhost:4321

Independent studio

Work that
moves people.
01

Could this say exactly what the product does?

hero-heading · src/pages/index.astro
02

Check this spacing on mobile.

390 × 844 · open
03 / Grow

Product roadmap

What AstroCanvas does now — and what comes next.

The first release focuses on safe text editing. Annotation, image editing and visual controls will be added in response to real user feedback.

Now

Literal text editing

Safe source persistenceLive preview and resetAtomic file writes

Next

Annotations

Overlay pins and screenshotsMarkdown and structured exportDeveloper and agent handoff

Then

Visual controls

Links, images and alt textSpacing and colour tokensDiffs and revision history

One plan. No calculator.

Cancel from the customer portal whenever you like.

£5 a month

Unlimited Astro sites.
Cancel whenever.

  • One developer licence
  • Unlimited local Astro projects
  • All product updates while subscribed
  • Reviewers never need a paid seat
Try the interactive demoCheckout opens when early access is ready.
04 / Details

Astro visual editor FAQ

Straight answers.

Does AstroCanvas ship to production?

No. Editing is registered only during Astro’s development command. Production builds contain no editor or write endpoint.

Can it edit any Astro component?

Not blindly. The first release edits explicitly marked literal content. Unsupported structures stay visible but read-only.

Is AstroCanvas an Astro CMS?

It is a lightweight alternative when you only need to edit marked content visually. It saves changes to your existing Astro source instead of moving content into a hosted CMS.

What happens when I cancel?

Your source remains ordinary Astro. There is no hosted content to export and no site is held hostage.

Astro editor for £5 a month

Edit Astro websites without leaving the page.

Get AstroCanvas for £5