@draftbase/renderer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Draftbase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,221 @@
+# @draftbase/renderer
+
+Framework-agnostic MDX renderer for [Draftbase](https://draftbase.co), the MDX-based headless CMS for React developers. Takes an entry's MDX/markdown field and renders it into a real component tree (React or Vue) or a plain HTML string — no vendor lock-in to one frontend framework. `compileMDX` is a plain async function with no dependency on Next.js, a bundler, or a router.
+
+Every framework entry point exposes the **same API shape** — `compileMDX(source)` resolving to `{ ok: true, Content }` or `{ ok: false, error }` — so switching frameworks (or supporting several in one monorepo) means changing the import path, not the calling code:
+
+| Framework                                        | Import                                    | `Content` is a...                           |
+| ------------------------------------------------ | ----------------------------------------- | ------------------------------------------- |
+| React, Next.js, React Native, Remix, Astro, Vite | `@draftbase/renderer`                     | React component                             |
+| Vue                                              | `@draftbase/renderer/vue`                 | Vue component                               |
+| Anything else (Svelte, plain HTML, email, RSS)   | `toHtml` (below), from either entry point | — (returns an HTML string, not a component) |
+
+Only import the entry point for the framework you use — each pulls in just that framework's peer dependency (React or Vue), never both, so an app using one never bundles code for the other.
+
+## Install
+
+```bash
+pnpm add @draftbase/renderer
+```
+
+## Next.js App Router
+
+```tsx
+import { MDXContent } from "@draftbase/renderer";
+import "@draftbase/renderer/styles.css"; // optional slim default styling
+
+export default async function Page() {
+  const entry = await draftbase.getEntry<{ body: string }>("<entry id>");
+
+  return <MDXContent source={entry.fields.body} />;
+}
+```
+
+`MDXContent` is an `async` Server Component — it only works where React can await inside a component body (Next.js RSC).
+
+## Other React (client-side web, React Native, Remix, ...)
+
+Call `compileMDX` yourself from a loader/effect and render the result — no RSC required:
+
+```tsx
+import { useEffect, useState } from "react";
+import { compileMDX } from "@draftbase/renderer";
+import { View, Text } from "react-native";
+
+function Entry({ source }: { source: string }) {
+  const [compiled, setCompiled] = useState<Awaited<ReturnType<typeof compileMDX>>>();
+
+  useEffect(() => {
+    compileMDX(source).then(setCompiled);
+  }, [source]);
+
+  if (!compiled) return null;
+  if (!compiled.ok) return <Text>{source}</Text>;
+
+  const { Content } = compiled;
+  return (
+    <View>
+      <Content components={{ p: Text, h1: Text /* ... */ }} />
+    </View>
+  );
+}
+```
+
+Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
+
+## Astro
+
+Astro components aren't React, so render through a React island. Compile server-side in the `.astro` frontmatter (Astro's runtime does allow `await` there), then hand the compiled `Content` to a small client React wrapper component:
+
+```astro
+---
+import { compileMDX } from "@draftbase/renderer";
+import MDXIsland from "../components/MDXIsland"; // the client wrapper below
+
+const compiled = await compileMDX(entry.fields.body);
+---
+
+<MDXIsland client:load compiled={compiled} />
+```
+
+```tsx
+// src/components/MDXIsland.tsx
+import type { CompiledMDX, FailedMDX } from "@draftbase/renderer";
+
+export default function MDXIsland({ compiled }: { compiled: CompiledMDX | FailedMDX }) {
+  if (!compiled.ok) return <p>{/* fallback text */}</p>;
+  const { Content } = compiled;
+  return <Content />;
+}
+```
+
+## Vite + React
+
+No RSC in a Vite SPA — use the `compileMDX`-in-`useEffect` pattern from the section above.
+
+## Vue
+
+`compileMDX` from the `/vue` entry point returns a Vue component instead of a React one — same `{ ok, Content }` / `{ ok, error }` shape. Vue has no RSC-style async component, so call it from `setup()`/a composable and render the result yourself, the same pattern as client-side React above:
+
+```vue
+<script setup>
+import { ref, onMounted } from "vue";
+import { compileMDX } from "@draftbase/renderer/vue";
+
+const props = defineProps<{ source: string }>();
+const compiled = ref();
+
+onMounted(async () => {
+  compiled.value = await compileMDX(props.source);
+});
+</script>
+
+<template>
+  <component :is="compiled.Content" v-if="compiled?.ok" />
+  <p v-else-if="compiled">{{ props.source }}</p>
+</template>
+```
+
+Custom components and markdown-element overrides pass through the same way, as a `components` prop on `Content`.
+
+## Nuxt
+
+Nuxt is Vue, so use the `/vue` entry point — same composable pattern as plain Vue above, from a Nuxt page/component:
+
+```vue
+<script setup>
+import { compileMDX } from "@draftbase/renderer/vue";
+
+const { data: entry } = await useAsyncData("entry", () => $fetch(`/api/blog/${route.params.slug}`));
+const compiled = ref();
+onMounted(async () => {
+  compiled.value = await compileMDX(entry.value.fields.body);
+});
+</script>
+
+<template>
+  <component :is="compiled.Content" v-if="compiled?.ok" />
+</template>
+```
+
+## SvelteKit, Angular, Solid, and other non-React/Vue frameworks
+
+This package ships React and Vue component output only. For any other framework, use `toHtml` (below) to get a plain HTML string and render it with each framework's raw-HTML primitive (Svelte's `{@html ...}`, Angular's `[innerHTML]`, Solid's `innerHTML` prop) — same as the Static HTML section:
+
+```ts
+// SvelteKit +page.server.ts
+import { toHtml } from "@draftbase/renderer";
+export async function load({ params }) {
+  const entry = await draftbase.getEntry(params.slug);
+  return { html: await toHtml(entry.fields.body) };
+}
+```
+
+```svelte
+<!-- +page.svelte -->
+<script>export let data;</script>
+{@html data.html}
+```
+
+`rehype-slug` still adds heading `id`s for anchor links even in the HTML-string path — sanitize/escape user-controlled content upstream as you would with any `{@html}`/`innerHTML` usage.
+
+## Static HTML
+
+For contexts that need a plain HTML string instead of a mounted React tree (email, RSS, non-React embeds), use `toHtml` — headings get `id` slugs (via `rehype-slug`) for anchor links:
+
+```ts
+import { toHtml } from "@draftbase/renderer";
+
+const html = await toHtml(entry.fields.body);
+```
+
+## Custom components
+
+Content can invoke JSX components by name inside the MDX source (e.g. `<Callout type="warning">...</Callout>`). Pass the implementations:
+
+```tsx
+import { Callout, ImageBlock } from "@/components/content";
+
+<MDXContent source={entry.fields.body} components={{ Callout, ImageBlock }} />;
+```
+
+Any standard markdown element (`h1`, `table`, `a`, ...) can also be overridden the same way, by key — **required** on non-DOM renderers like React Native, which have no intrinsic `div`/`p`/`a`/`img` tags.
+
+## Styling
+
+`@draftbase/renderer/styles.css` wraps output in a `.db-content` class with slim, sensible defaults (typography, tables, code blocks). Web-only, opt-in:
+
+- Skip it entirely: don't import the CSS.
+- Disable per-render: `<MDXContent source={...} unstyled />`.
+- Override: import your own CSS after it (or with higher specificity) targeting `.db-content`.
+- Extra classes: `<MDXContent source={...} className="prose" />`.
+- Custom wrapper/error element (e.g. React Native's `View`/`Text`): `<MDXContent source={...} wrapperTag={View} errorTag={Text} />`.
+
+## Using with Claude Code / AI coding agents
+
+If you're an agent wiring this into a project, follow this checklist:
+
+1. **Install**: `pnpm add @draftbase/renderer` (or `npm`/`yarn` — detect the project's package manager first).
+2. **Pick the right entry point first** — check the target framework in the table at the top of this file, then import only that one (`@draftbase/renderer` vs `@draftbase/renderer/vue`). Importing the wrong one pulls in a peer dependency (React or Vue) the project may not have installed, and will fail to resolve.
+3. **Detect RSC support before choosing a pattern**: Next.js App Router (or another RSC framework) → use `<MDXContent source={...} />` directly, it's an async Server Component. Everything else (client-side React, React Native, Remix, Vite SPA, Vue) → use the `compileMDX(source)` + state/ref pattern shown above; do not try to `await` it inside a plain client component render.
+4. **Every `compileMDX`/`MDXContent` result is a discriminated union** — always branch on `.ok` before touching `.Content`; treat `!ok` as a real render path (show `.error` or fallback text), don't just assume success.
+5. **Non-DOM renderers (React Native, custom email/RSS pipelines) have no intrinsic HTML tags** — you must pass a `components` map covering every markdown element actually used in the source (`p`, `h1`-`h6`, `a`, `img`, `table`, ...), or those elements will fail to render. For plain HTML output (email, RSS, non-React embeds) use `toHtml` instead of a component tree.
+6. **Don't hand-roll styling** — import `@draftbase/renderer/styles.css` for sensible defaults, or pass `unstyled`/`className` on `MDXContent`, rather than writing new prose/typography CSS from scratch.
+7. **This package ships zero bundled React/Vue** — both are optional peer dependencies. If the target project doesn't already have the matching framework installed, install it too or the build will fail.
+
+## FAQ
+
+**What is Draftbase?**
+Draftbase is a lightweight, MDX-based headless CMS built for React and Next.js developers. Content is authored as MDX/markdown with typed fields, fetched via [`@draftbase/sdk`](https://www.npmjs.com/package/@draftbase/sdk), and rendered into real components with this package.
+
+**Why MDX instead of plain markdown or a block-based rich-text editor?**
+MDX lets authors drop live, typed React/Vue components (callouts, embeds, product cards) directly inside prose, while still compiling down to plain HTML for frameworks that don't run JSX. Plain markdown can't embed components; block editors trade that flexibility for a rigid, CMS-specific JSON schema.
+
+**Does this work with static site generators (SSG) as well as SSR?**
+Yes — `compileMDX`/`MDXContent` are plain async functions with no request-scoped state, so they run identically at build time (Next.js `generateStaticParams`, Astro static output, Nuxt `nitro` prerender) or at request time (SSR/RSC).
+
+**Is the compiled output safe for SEO?**
+Yes — `compileMDX`/`toHtml` produce standard semantic HTML (headings, lists, tables, links) server-side, so it's fully crawlable and indexable with no client-side rendering required; `rehype-slug` also adds heading `id`s for deep-linkable anchor URLs.
+
+**Which frontend frameworks are supported?**
+React (Next.js App Router/RSC, plain client React, React Native, Remix, Astro islands, Vite) and Vue (including Nuxt) get first-class component output. Any other framework (Svelte, Angular, Solid, plain HTML/email/RSS) can use `toHtml` to get a plain HTML string instead.

package/dist/MDXContent.d.ts

@@ -0,0 +1,40 @@
+import type { MDXComponents } from "mdx/types";
+import type { ComponentType, ElementType, ReactNode } from "react";
+import { type FailedMDX } from "./core.js";
+export interface CompiledMDX {
+    ok: true;
+    Content: ComponentType<{
+        components?: MDXComponents;
+    }>;
+}
+export type { FailedMDX };
+/**
+ * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions,
+ * safe to call from a React Native loader, a client-side effect, or a Next.js Server
+ * Component (the `MDXContent` component below does the latter).
+ */
+export declare function compileMDX(source: string): Promise<CompiledMDX | FailedMDX>;
+export interface MDXContentProps {
+    /** Raw MDX/markdown string, e.g. an entry's rich text field. */
+    source: string;
+    /** Custom components available by name inside the MDX source (e.g. `<Callout>`), and/or
+     * overrides for standard markdown elements (`p`, `h1`, `a`, `img`, ...) — required on
+     * non-DOM renderers such as React Native, which have no intrinsic `div`/`p`/`a` tags. */
+    components?: MDXComponents;
+    /** Skip the default `db-content` styling class. */
+    unstyled?: boolean;
+    /** Extra class name(s) merged onto the wrapper element. */
+    className?: string;
+    /** Wrapper element/component. Defaults to `"div"`; pass React Native's `View` if it accepts
+     * `className` (e.g. NativeWind), otherwise drop `className`/`unstyled` and style via `components`. */
+    wrapperTag?: ElementType;
+    /** Element/component used to render the fallback plain-text output when `source` fails to
+     * compile as MDX. Defaults to `"p"`; pass React Native's `Text`. */
+    errorTag?: ElementType;
+}
+/**
+ * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React (client-side
+ * web, React Native, Remix, ...), call `compileMDX` directly from your own data loader/effect
+ * and render `Content` yourself — `await` inside a component body only works as an RSC.
+ */
+export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, }: MDXContentProps): Promise<ReactNode>;

package/dist/MDXContent.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as runtime from "react/jsx-runtime";
+import { compileMDXCore } from "./core.js";
+import { wrapperClassName } from "./wrapperClassName.js";
+/**
+ * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions,
+ * safe to call from a React Native loader, a client-side effect, or a Next.js Server
+ * Component (the `MDXContent` component below does the latter).
+ */
+export async function compileMDX(source) {
+    return compileMDXCore(source, runtime);
+}
+/**
+ * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React (client-side
+ * web, React Native, Remix, ...), call `compileMDX` directly from your own data loader/effect
+ * and render `Content` yourself — `await` inside a component body only works as an RSC.
+ */
+export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", }) {
+    const Wrapper = wrapperTag;
+    const ErrorTag = errorTag;
+    const wrapperClass = wrapperClassName(unstyled, className);
+    const compiled = await compileMDX(source);
+    if (!compiled.ok) {
+        // Source isn't valid MDX/JSX (e.g. stray `<`/`{` in prose) — fail soft instead
+        // of crashing the page; render it as plain text so the copy still shows.
+        console.error("MDX compile failed, rendering as plain text", compiled.error);
+        return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) }));
+    }
+    const { Content } = compiled;
+    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(Content, { components: components }) }));
+}

package/dist/compileMDX.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compileMDX.test.js

@@ -0,0 +1,24 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { compileMDX as compileReactMDX } from "./MDXContent.js";
+import { compileMDX as compileVueMDX } from "./vue.js";
+const SOURCE = "# Hello\n\nWorld";
+test("react compileMDX evaluates MDX into a React element tree", async () => {
+    const result = await compileReactMDX(SOURCE);
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    assert.equal(typeof result.Content, "function");
+    const render = result.Content;
+    const element = render({});
+    assert.equal(element.props.children[0].type, "h1");
+});
+test("vue compileMDX evaluates the same MDX source into a Vue vnode tree", async () => {
+    const result = await compileVueMDX(SOURCE);
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    assert.equal(typeof result.Content, "function");
+    const vnode = result.Content({});
+    assert.equal(vnode.children[0].type, "h1");
+});

package/dist/core.d.ts

@@ -0,0 +1,16 @@
+import type { EvaluateOptions } from "@mdx-js/mdx";
+export type JsxRuntime = Pick<EvaluateOptions, "Fragment" | "jsx" | "jsxs" | "jsxDEV">;
+export interface CompiledMDX<TComponent> {
+    ok: true;
+    Content: TComponent;
+}
+export interface FailedMDX {
+    ok: false;
+    error: unknown;
+}
+/**
+ * Shared MDX-to-component evaluation. Parameterized by JSX runtime (React's
+ * `react/jsx-runtime`, a Vue `h()`-based shim, ...) so each framework entry point
+ * supplies its own without duplicating the remark/rehype pipeline.
+ */
+export declare function compileMDXCore<TComponent>(source: string, jsxRuntime: JsxRuntime): Promise<CompiledMDX<TComponent> | FailedMDX>;

package/dist/core.js

@@ -0,0 +1,23 @@
+import { evaluate } from "@mdx-js/mdx";
+import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
+/**
+ * Shared MDX-to-component evaluation. Parameterized by JSX runtime (React's
+ * `react/jsx-runtime`, a Vue `h()`-based shim, ...) so each framework entry point
+ * supplies its own without duplicating the remark/rehype pipeline.
+ */
+export async function compileMDXCore(source, jsxRuntime) {
+    try {
+        const { default: Content } = await evaluate(source, {
+            ...jsxRuntime,
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: [rehypeSlug],
+        });
+        // evaluate()'s return type assumes React's JSX types regardless of the runtime
+        // passed in; TComponent reflects the actual shape for the calling framework.
+        return { ok: true, Content: Content };
+    }
+    catch (error) {
+        return { ok: false, error };
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MDXContent, compileMDX } from "./MDXContent.js";
+export type { MDXContentProps, CompiledMDX, FailedMDX } from "./MDXContent.js";
+export { toHtml } from "./toHtml.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { MDXContent, compileMDX } from "./MDXContent.js";
+export { toHtml } from "./toHtml.js";

package/dist/styles.css

@@ -0,0 +1,208 @@
+/* Slim default typography for Draftbase MDX content.
+   Opt-in: import "@draftbase/react/styles.css".
+   Disable per-render: <MDXContent unstyled />.
+   Override: target ".db-content" with higher-specificity or later-loaded rules. */
+
+.db-content {
+  line-height: 1.6;
+  color: inherit;
+}
+
+.db-content > :first-child {
+  margin-top: 0;
+}
+.db-content > :last-child {
+  margin-bottom: 0;
+}
+
+.db-content h1,
+.db-content h2,
+.db-content h3,
+.db-content h4,
+.db-content h5,
+.db-content h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 1.5em 0 0.5em;
+  color: inherit;
+}
+
+.db-content h1 {
+  font-size: 2em;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+  margin-top: 1.25em;
+}
+
+.db-content h2 {
+  font-size: 1.625em;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  margin-top: 1.75em;
+}
+
+.db-content h3 {
+  font-size: 1.375em;
+  line-height: 1.3;
+}
+
+.db-content h4 {
+  font-size: 1.25em;
+  line-height: 1.35;
+}
+
+.db-content h5 {
+  font-size: 1.125em;
+  line-height: 1.4;
+}
+
+.db-content h6 {
+  font-size: 1em;
+  line-height: 1.4;
+}
+
+@media (max-width: 640px) {
+  .db-content h1 {
+    font-size: 1.75em;
+  }
+  .db-content h2 {
+    font-size: 1.4em;
+  }
+  .db-content h3 {
+    font-size: 1.2em;
+  }
+}
+
+.db-content p,
+.db-content ul,
+.db-content ol,
+.db-content blockquote,
+.db-content pre,
+.db-content table {
+  margin: 0 0 1em;
+}
+
+.db-content ul,
+.db-content ol {
+  padding-left: 1.5em;
+}
+
+.db-content ul {
+  list-style-type: disc;
+}
+
+.db-content ol {
+  list-style-type: decimal;
+}
+
+.db-content ul ul {
+  list-style-type: circle;
+}
+
+.db-content ol ol {
+  list-style-type: lower-alpha;
+}
+
+.db-content ul ul ul,
+.db-content ol ol ol {
+  list-style-type: square;
+}
+
+.db-content li {
+  margin: 0.25em 0;
+}
+.db-content li > ul,
+.db-content li > ol {
+  margin: 0.25em 0 0;
+}
+.db-content li > p {
+  margin: 0;
+}
+
+.db-content ul.contains-task-list {
+  list-style: none;
+  padding-left: 0.25em;
+}
+.db-content li.task-list-item {
+  list-style: none;
+  margin-left: 0;
+}
+.db-content li.task-list-item input[type="checkbox"] {
+  margin-right: 0.5em;
+}
+
+.db-content strong {
+  font-weight: 600;
+}
+.db-content em {
+  font-style: italic;
+}
+.db-content del {
+  text-decoration: line-through;
+  opacity: 0.75;
+}
+
+.db-content blockquote {
+  margin-left: 0;
+  padding-left: 1em;
+  border-left: 3px solid currentColor;
+  opacity: 0.85;
+}
+
+.db-content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  padding: 0.15em 0.35em;
+  background: rgba(127, 127, 127, 0.15);
+  border-radius: 4px;
+}
+
+.db-content pre {
+  padding: 1em;
+  overflow-x: auto;
+  background: rgba(127, 127, 127, 0.1);
+  border-radius: 8px;
+}
+.db-content pre code {
+  padding: 0;
+  background: none;
+}
+
+.db-content table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.db-content th,
+.db-content td {
+  border: 1px solid rgba(127, 127, 127, 0.3);
+  padding: 0.5em 0.75em;
+  text-align: left;
+}
+
+.db-content th {
+  background: rgba(127, 127, 127, 0.08);
+  font-weight: 600;
+}
+
+.db-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.db-content a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.db-content a:hover {
+  opacity: 0.8;
+}
+
+.db-content hr {
+  border: none;
+  border-top: 1px solid rgba(127, 127, 127, 0.3);
+  margin: 2em 0;
+}

package/dist/toHtml.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Renders raw MDX/markdown to a static HTML string — no React, no JSX component
+ * evaluation. For contexts that need plain HTML (email, RSS, non-React embeds),
+ * not a mounted React tree; use `compileMDX`/`MDXContent` for that instead.
+ * JSX inside the source (e.g. `<Callout>`) is passed through as literal HTML tags.
+ */
+export declare function toHtml(source: string): Promise<string>;

package/dist/toHtml.js

@@ -0,0 +1,22 @@
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeSlug from "rehype-slug";
+import rehypeStringify from "rehype-stringify";
+/**
+ * Renders raw MDX/markdown to a static HTML string — no React, no JSX component
+ * evaluation. For contexts that need plain HTML (email, RSS, non-React embeds),
+ * not a mounted React tree; use `compileMDX`/`MDXContent` for that instead.
+ * JSX inside the source (e.g. `<Callout>`) is passed through as literal HTML tags.
+ */
+export async function toHtml(source) {
+    const file = await unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype, { allowDangerousHtml: true })
+        .use(rehypeSlug)
+        .use(rehypeStringify, { allowDangerousHtml: true })
+        .process(source);
+    return String(file);
+}

package/dist/toHtml.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toHtml.test.js

@@ -0,0 +1,12 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { toHtml } from "./toHtml.js";
+test("renders markdown to html", async () => {
+    const html = await toHtml("# Title\n\nSome **bold** text.");
+    assert.match(html, /<h1 id="title">Title<\/h1>/);
+    assert.match(html, /<strong>bold<\/strong>/);
+});
+test("supports gfm tables", async () => {
+    const html = await toHtml("| a | b |\n| - | - |\n| 1 | 2 |");
+    assert.match(html, /<table>/);
+});

package/dist/vue.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from "vue";
+import { type FailedMDX } from "./core.js";
+export interface CompiledMDX {
+    ok: true;
+    Content: Component;
+}
+export type { FailedMDX };
+/**
+ * Compiles raw MDX/markdown into a renderable Vue component. Vue has no RSC-style
+ * async component, so call this from `setup()`/a composable and render the result
+ * yourself: `h(Content, props)` or `<component :is="Content" />`.
+ */
+export declare function compileMDX(source: string): Promise<CompiledMDX | FailedMDX>;

package/dist/vue.js

@@ -0,0 +1,10 @@
+import { compileMDXCore } from "./core.js";
+import { vueJsxRuntime } from "./vueRuntime.js";
+/**
+ * Compiles raw MDX/markdown into a renderable Vue component. Vue has no RSC-style
+ * async component, so call this from `setup()`/a composable and render the result
+ * yourself: `h(Content, props)` or `<component :is="Content" />`.
+ */
+export async function compileMDX(source) {
+    return compileMDXCore(source, vueJsxRuntime);
+}

package/dist/vueRuntime.d.ts

@@ -0,0 +1,3 @@
+import type { JsxRuntime } from "./core.js";
+/** `evaluate()`-compatible JSX runtime backed by Vue's `h()`, used by `./vue.js`. */
+export declare const vueJsxRuntime: JsxRuntime;

package/dist/vueRuntime.js

@@ -0,0 +1,13 @@
+import { h, Fragment as VueFragment } from "vue";
+function toVNode(type, props) {
+    const { children, ...rest } = props ?? {};
+    // Vue's h() takes children as a separate argument; the automatic JSX runtime
+    // embeds them in props instead — unwrap before handing off.
+    return h(type, rest, children);
+}
+/** `evaluate()`-compatible JSX runtime backed by Vue's `h()`, used by `./vue.js`. */
+export const vueJsxRuntime = {
+    Fragment: VueFragment,
+    jsx: toVNode,
+    jsxs: toVNode,
+};

package/dist/wrapperClassName.d.ts

@@ -0,0 +1 @@
+export declare function wrapperClassName(unstyled: boolean | undefined, className: string | undefined): string | undefined;

package/dist/wrapperClassName.js

@@ -0,0 +1,3 @@
+export function wrapperClassName(unstyled, className) {
+    return [unstyled ? undefined : "db-content", className].filter(Boolean).join(" ") || undefined;
+}

package/dist/wrapperClassName.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/wrapperClassName.test.js

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { wrapperClassName } from "./wrapperClassName.js";
+test("defaults to db-content", () => {
+    assert.equal(wrapperClassName(undefined, undefined), "db-content");
+});
+test("unstyled drops db-content", () => {
+    assert.equal(wrapperClassName(true, undefined), undefined);
+});
+test("merges custom className", () => {
+    assert.equal(wrapperClassName(false, "prose"), "db-content prose");
+});
+test("unstyled keeps custom className", () => {
+    assert.equal(wrapperClassName(true, "prose"), "prose");
+});

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@draftbase/renderer",
+  "version": "0.1.0",
+  "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
+  "keywords": [
+    "draftbase",
+    "mdx",
+    "cms",
+    "react",
+    "vue",
+    "renderer",
+    "astro",
+    "vite"
+  ],
+  "license": "MIT",
+  "author": "Draftbase",
+  "homepage": "https://draftbase.co",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/draftbase-co/draftbase-monorepo.git",
+    "directory": "packages/renderer"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./vue": "./dist/vue.js",
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^3.1.1",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "unified": "^11.0.5"
+  },
+  "devDependencies": {
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.9.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "vue": "^3.5.0",
+    "typescript": "^5.6.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
+    "lint": "tsc --noEmit",
+    "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js"
+  }
+}