emdash-compose

@emdash-compose/compose adds Compose Lab to an existing EmDash app and provides the plugin hooks used to save and render Compose pages.

Install

pnpm add @emdash-compose/compose

Register the plugin

Add Compose to your astro.config.mjs:

import node from "@astrojs/node";
import react from "@astrojs/react";
import { composePlugin } from "@emdash-compose/compose";
import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	output: "server",
	adapter: node({ mode: "standalone" }),
	integrations: [
		react(),
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			plugins: [composePlugin()],
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

Add the frontend route

Create src/pages/[...compose].astro so your public site can render the pages saved through Compose:

---
export const prerender = false;

const path = Astro.params.compose || "index";

const res = await fetch(new URL("/_emdash/api/plugins/compose/get_page", Astro.url), {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({ path }),
});

const { data } = res.ok ? await res.json() : { data: null };
const pageHtml = data?.html ?? "";
---

<Fragment set:html={pageHtml} />

What you get

• A Compose Lab admin page inside EmDash.
• Storage-backed page saving and lookup.
• A simple fetch-based route for rendering saved pages on the frontend.