This kinda works! It's a proof-of-concept using a local Vite plugin that allows you to edit your content in-context. Simply place a use:editor
directive on your content's parent, and suddenly you have a live editor.
I skipped over the hard parts in favor of getting the basic idea working. I'm hoping this serves as inspiration for other folks.
The plugin itself (located in astro-editor/
) creates a middleware endpoint that handles editor updates and syncs them back to the sourcefile. The client is responsible for POSTing updates to that server endpoint. In order to maintain client-side state, the plugin also disables HMR/reloads for .md
files.
Add the Vite plugin to your Astro config.
// astro.config.mjs
import editor from './astro-editor/plugin.mjs'
export default {
vite: {
plugins: [editor()]
}
}
In your Layout file, wrap the <slot>
contents in <div use:editor>
. Styling and attributes will still apply when the editor is active.
---
// src/components/BlogPost.astro
---
<div class="post" use:editor>
<slot />
</div>