Unlike connecting EmDash to Next.js or Nuxt — which means running it as a separate, decoupled backend — Astro is EmDash's actual, designed-for integration. There's no REST API round trip, no separate deployment, and no manual revalidation strategy to build. This is how the connection actually works under the hood, and how to query and render content once it's wired up.

The Integration Point: astro.config.mjs

EmDash registers as a standard Astro integration. A minimal local setup with SQLite and local file storage looks like this:

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

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

That's the entire connection — a database adapter and a storage adapter passed into the `emdash()` integration. Everything else (the admin panel at `/_emdash/admin`, the content model, the query API) becomes available to the rest of your Astro project automatically.

How Content Actually Flows

EmDash serves content through Astro's Live Collections at runtime, so changes an editor makes are visible immediately. Your pages read the same content through query functions as the admin panel writes.

Concretely: content lives in your configured database. Editors write to it through the admin UI. Your Astro pages read from the same database, in the same process, through two exported functions — no cache to invalidate, no webhook to configure, no build step between an edit and it appearing on the live site.

Querying Content: The Two Functions You Need

Import both from the top-level `emdash` package:

import { getEmDashCollection, getEmDashEntry } from "emdash";

Get All Entries in a Collection

---
import { getEmDashCollection } from "emdash";

const { entries: posts, error } = await getEmDashCollection("posts", {
  status: "published",
  limit: 10,
});

if (error) {
  console.error("Failed to load posts:", error);
}
---

<ul>
  {posts.map((post) => (
    <li><a href={`/posts/${post.slug}`}>{post.data.title}</a></li>
  ))}
</ul>

Get a Single Entry by Slug

---
import { getEmDashEntry } from "emdash";

const { slug } = Astro.params;
const { entry: post, error } = await getEmDashEntry("posts", slug);

if (!post) {
  return Astro.redirect("/404");
}
---

<h1>{post.data.title}</h1>

Rendering Rich Content

Post content stored in a `portableText` field is a structured JSON array, not raw HTML. Render it with EmDash's `<PortableText>` component, which handles images, code blocks, embeds, and formatting out of the box:

---
import { PortableText } from "emdash/ui";
---

<PortableText value={post.data.content} />

To render a custom block type (a plugin-defined block, or an `htmlBlock` you want styled differently), pass a `components` map — this is exactly the pattern used elsewhere on this site to customize how external links render inside post bodies.

Using Astro Content Collections Alongside EmDash

You don't have to choose one or the other. Astro's file-based `astro:content` collections and EmDash's database-backed collections coexist cleanly — a common split is developer-managed content (docs, changelogs) in Astro collections, and editor-managed content (blog posts, marketing pages) in EmDash:

---
import { getCollection } from "astro:content";
import { getEmDashCollection } from "emdash";

// Developer-managed docs from files
const docs = await getCollection("docs");

// Editor-managed posts from the database
const { entries: posts } = await getEmDashCollection("posts", {
  status: "published",
  limit: 5,
});
---

Adding React or Vue Components Inside Your EmDash Site

If you want interactive components beyond what Astro's own templating covers, Astro's official framework integrations work exactly the same way inside an EmDash-powered site as any other Astro project — add `@astrojs/react` or `@astrojs/vue` alongside the `emdash()` integration, and use those components as islands in your `.astro` pages while EmDash content queries work unchanged around them.

Frequently Asked Questions

Do I need a separate database server to develop locally?

No — the local development setup uses a SQLite file by default, with no external database process to run. Production deployments can move to libSQL, Cloudflare D1, or PostgreSQL depending on your hosting target.

Does every page need to use getEmDashCollection or getEmDashEntry?

Only pages rendering EmDash-managed content. Static marketing pages, layouts, and anything else in your Astro project work exactly as they would without EmDash at all.

What happens if a query fails?

Both query functions return an `error` field alongside their result rather than throwing — check it explicitly (as shown above) so a database hiccup doesn't produce an unhandled exception mid-render.

Can I get TypeScript autocomplete on the fields I define in the admin?

Yes — EmDash generates TypeScript types from your current content model, giving autocomplete on `post.data.whateverField` from query to template, regenerated whenever your schema changes.

The Bottom Line

Connecting EmDash to Astro isn't really a separate step — it's the platform's native mode. Two query functions, one `<PortableText>` component for rich content, and your admin edits show up on the live site with no rebuild in between. If you need React or Vue components inside that same site, Astro's own framework integrations handle that without any special EmDash configuration. See our 10-minute setup guide if you haven't scaffolded a project yet, or our guide to customizing content models to define what you're querying.