Summary
I have built this tool to facilitate quick edits during the development of Astro websites. Edit copy or images directly from the page as a visual builder does. For more complex changes I simply either want to find the source code quickly or get the context to hand the task over to an AI agent. For simple static websites that don’t use dedicated CRM, I can organise and manage collections from the UI.
Edit visually without changing your code first workflow
Click a text string from an .astro template and type right into it. The button above the element takes you to the source file. Press enter to save, escape to cancel.
Preview of the editing experience: Edit text and images visually, peek at the code or jump straight into the code editor.
Edits frontmatter strings that are pulled to your components
Text that does not sit in the template directly still works, as long as it can be traced. A value that arrives through an {expression} from the frontmatter is followed back to the string that produced it, and you edit that string. It opens in a popup with the trace of where it came from.
Parsing simple HTML markup in your copy
Text carrying inline markup gets a different treatment. A heading broken by a <br>, or a sentence with a <strong> inside it, opens a popup over the raw source with a row of insertable tags: br, strong, em, b, i, u, a, span, code, small, sup and sub.
Some things should be edited in code
If you try to edit something beyond the reach of this tool, you get a notice explaining the reason and a button that opens the source instead.
Swapping images without leaving the page
Click an image and you get a preview, the file name and size, the alt text, and the six images most recently added to the project.
If none of those is the one you want, the full picker lists everything in your asset directories, with a filter and an upload button.
Unsplash integration
Add an Unsplash access key and a second tab searches Unsplash from inside the site.
A CMS drawer, with no CMS behind it
To make this work you need to add one line anotation to the template that renders the collection date. A dev-only meta tag on the page naming the file that backs it.
If a page content is rendered from a Markdown or MDX entry, Edit entry opens a drawer of typed form fields generated from your own zod schema. It looks like a small CMS panel, but it reads and writes the MDX file directly. You can create and delete entries from here too.
You can edit the content either through a rich text editor or as raw markdown, whichever you prefer. The rich editor covers headings, emphasis, lists, quotes, code, links, images and horizontal rules. Anything past that subset, so tables, raw HTML or MDX, footnotes and nested lists, stays editable as markdown source.
Mapping your collections to the drawer
The newest part is the collection designer. It lists every collection you declare and lets you edit its fields: add one, retype one, remove one, or build a new collection from scratch. Those edits patch your content.config.ts directly. You can change the fields type in the CMS drawer.
Finding the source – HTML and CSS
You can preview a syntax-highlighted peek at the file around your element, and Open in editor jumps to the exact line.
The class chips on the pill show which CSS rules apply to the element and where they are written, so adjusting a transition is one click rather than a search.
Hand the context to your AI agent
The pill has one more button, which is extra useful when I am working alongside an AI agent: Copy. It puts the element’s whole context on your clipboard: the source file location, the page URL, the exact DOM path, the rendered HTML, and the CSS rules that apply to it and what files these come from. Instead of spending turns working all that out, the agent starts at the change. The context window stays lean and the answers come back better and faster.
Settings without a restart
The admin bar sits at the top of the page by default. You can pin it to the bottom instead, or set it to auto-hide so it only appears when you move near the edge.Everything else is configurable from a settings drawer without restarting the dev server: which directories the image picker scans, where uploads land, which extensions the patcher may write, whether the CSS inspector is on.
Your choices are saved in .astro-dev-edit.json and apply to the next request. Anything you set in astro.config.mjs wins over that file and renders read-only in the drawer, with a note saying where the value came from.
Gitignore .astro-dev-edit.json, since it also holds your Unsplash key. The drawer warns you when you have not.
Your git tree is the undo button
Every save writes the file on disk immediately. There is no undo button and no edit history, which is deliberate: your working tree already does that job better than a second history system inside an overlay would. Start a session from a clean tree, review with git diff, and throw an edit away with git checkout <file> if you need to.
The writes themselves are careful. Each one is atomic, and the server confirms the source still matches what the page showed before touching anything.
You can also undo in your editor, if you open the file you just edited.
Who is this for
The point was never to move my workflow out of the code editor. My goal is to have a second option at hand for quick changes and fast navigation to the source.
If that navigation is all you want, there is a lighter tool that does exactly that job: astro-click-to-source by invisible1988. It also earns the credit for the technique underneath the tracing the source used in this tool.
Installing it
One dev dependency and one line in your config:
npm install --save-dev "github:janjcwebtech/astro-dev-edit"
// astro.config.mjs
import { defineConfig } from "astro/config";
import devEdit from "astro-dev-edit";
export default defineConfig({
integrations: [devEdit()],
});Run npm run dev and click Edit page in the admin bar.
Compatibility
It works on Astro 5 through 7. On Astro 5 and 6 the source annotations come from the compiler, but only while the dev toolbar is enabled, so keep devToolbar.enabled on or set sourceAnnotations: 'force'. From Astro 7 the Rust compiler stopped emitting them, so the integration injects them itself.
Roadmap
You will find future plans and newly shipped features on the roadmap.
