Visual Editing

Visual editing in Plyy is a round trip: select an element in the live preview, edit it in the inspector, and the change is written back into the project’s .astro source files. Three packages cooperate to make that work.

The pieces

@plyy/astro-editor-bridge

A dev-only Astro integration injected into the previewed project. It runs a small script in the preview page that:

• captures Astro’s data-astro-source-file / data-astro-source-loc annotations (then strips them from the DOM),
• handles hover highlighting and element selection in the preview iframe,
• talks to the parent editor window (postMessage to the editor origin, e.g. http://localhost:1420).

Caution

The source annotations the bridge relies on are emitted by Astro 5’s dev compiler. Astro 7’s Rust compiler no longer emits them, so the project template stays on Astro 5.

@plyy/astro-edit-engine

The source-editing engine, built on @astrojs/compiler. Given a file and source location it can:

• readElementAt / readElementFromAnnotation — resolve the selected element in source,
• applyEdit — apply an EditOperation (edit text, change classes, wrap, delete) and return the rewritten source,
• findComponentUsage — trace component usages across the project.

It also ships an astro-edit CLI for use outside the app.

@plyy/astro-template

The Astro project template the app scaffolds new projects from. It wires in the editor bridge integration so freshly created projects are editable out of the box.

The flow

1. The desktop app scaffolds a project from the template and runs astro dev inside it.
2. The preview iframe loads the dev server; the bridge captures source annotations and reports the selected element to the editor.
3. The inspector sends an edit operation; the edit engine locates the element in the .astro source and rewrites it.
4. Astro’s dev server hot-reloads the preview with the change.