Astro

Why Astro in Nimbalyst?

Editing Astro websites usually means jumping between template files and data files, previewing in a separate browser tab, and mentally mapping rendered output back to source code. This extension collapses that workflow into a single editor — see the rendered page and edit its text in place.

Click text, type, save. The editor connects to your running Astro dev server, renders the page in an iframe, and marks all editable text elements. Click any text to edit it inline. Changes are automatically written back to the corresponding YAML data file.

Key Features

• Visual mode — See the fully rendered Astro page inside Nimbalyst. Click any editable text element to modify it directly on the page.
• Code mode — Toggle to view and edit the raw .astro source code alongside the visual preview.
• YAML data binding — The editor parses YAML imports in your Astro files and maps rendered text back to its source location in data files. Edits write back to the exact YAML path.
• Live dev server connection — Connects to your Astro dev server on localhost:4321 for accurate rendering with all your components, styles, and layouts.
• AI tools — Two AI tools let the agent refresh the page and list all editable text elements with their YAML source locations.
• Status toolbar — Shows connection state, number of editable elements found, and mode toggle.

Use Cases

• Content editing — Update marketing copy, blog metadata, or page text without touching code.
• Localization — Edit translated text values directly on the rendered page to verify context.
• Design iteration — See how text changes look in the actual layout as you type.
• Data-driven sites — Any Astro site that stores content in YAML data files benefits from visual editing.

How It Works

Start your Astro dev server (npm run dev), then open any .astro file in Nimbalyst. The extension loads the rendered page from localhost:4321, injects an editing overlay, and parses the file’s YAML imports to map text elements to their data sources. Click any highlighted text to edit it — changes save back to the YAML file on blur.