@draftbase/renderer 0.3.2 → 0.4.1

package/README.md

@@ -21,13 +21,16 @@ pnpm add @draftbase/renderer
 
 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) |
+| Framework                                      | Import                                    | `Content` is a...                           |
+| ---------------------------------------------- | ----------------------------------------- | ------------------------------------------- |
+| React, Next.js, Remix, Astro, Vite             | `@draftbase/renderer`                     | React component                             |
+| React Native                                   | `@draftbase/renderer/react-native`        | React component                             |
+| Vue, Nuxt                                      | `@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.
+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. The `/react-native` entry point never imports the `react-native` package itself (see its section below), so a Vue or web-only React project never pulls it in either.
+
+Every entry point renders standard markdown (`p`, `h1`-`h6`, tables, lists, links, ...) **with zero component mapping** — web React/Vue use real DOM elements automatically, and the React Native entry ships default Text/View/Image mappings (see below). You only ever need to pass `components` for content-specific custom JSX tags (e.g. `<Callout>`) that have no sensible default — and even `EntryLink` (the CMS's entry-link tag) has a default (`<a href="/entries/{id}">`) unless you override it.
 
 ## ⚛️ Next.js App Router
 
@@ -44,14 +47,51 @@ export default async function Page() {
 
 `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, ...)
+## Other React (client-side web, 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";
+
+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 <p>{source}</p>;
+
+  const { Content } = compiled;
+  return <Content />; // standard markdown renders as real DOM elements, no components map needed
+}
+```
+
+`compiled.ok` only catches MDX _syntax_ errors. If the source references a custom JSX component you didn't pass in `components` (e.g. `<Callout>` without a `Callout` implementation), React throws while rendering `<Content>` — wrap it in the exported `MDXErrorBoundary` to log it to the console and fail soft instead of crashing the page. `MDXContent` (the Next.js RSC helper above) already does this for you automatically.
+
+```tsx
+import { MDXErrorBoundary } from "@draftbase/renderer";
+
+<MDXErrorBoundary fallback={<p>{source}</p>}>
+  <Content />
+</MDXErrorBoundary>;
+```
+
+Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
+
+## React Native
+
+RN has no intrinsic host tags for `p`/`h1`/`a`/etc the way web React has real DOM elements, so it can't render standard markdown for free the way the web entry point does. Instead of mapping every tag yourself, wire up RN's three core primitives **once** via `@draftbase/renderer/react-native` and every markdown element — including a styled default `EntryLink` — works out of the box from there:
+
+```tsx
+import { useEffect, useState } from "react";
 import { View, Text } from "react-native";
+import { createReactNativeRenderer } from "@draftbase/renderer/react-native";
+
+const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
 
 function Entry({ source }: { source: string }) {
   const [compiled, setCompiled] = useState<Awaited<ReturnType<typeof compileMDX>>>();
@@ -66,23 +106,25 @@ function Entry({ source }: { source: string }) {
   const { Content } = compiled;
   return (
     <View>
-      <Content components={{ p: Text, h1: Text /* ... */ }} />
+      <Content /> {/* p, h1-h6, a, table, EntryLink, ... all render already-styled */}
     </View>
   );
 }
 ```
 
-`compiled.ok` only catches MDX _syntax_ errors. If the source references a JSX component you didn't pass in `components` (e.g. `<Callout>` without a `Callout` implementation), React throws while rendering `<Content>` — wrap it in the exported `MDXErrorBoundary` (React only, not React Native's non-DOM tree unless you supply an `errorTag`-equivalent fallback) to log it to the console and fail soft instead of crashing the page. `MDXContent` (the Next.js RSC helper above) already does this for you automatically.
+Default styling mirrors the web look (heading scale, blue underlined links, monospace code, table borders and row layout, ...). Override or disable it via a second argument:
 
 ```tsx
-import { MDXErrorBoundary } from "@draftbase/renderer";
+// override specific tags
+createReactNativeRenderer({ Text, View, Image }, { styles: { h1: { fontSize: 32 } } });
 
-<MDXErrorBoundary fallback={<Text>{source}</Text>}>
-  <Content components={{ p: Text, h1: Text /* ... */ }} />
-</MDXErrorBoundary>;
+// drop all default styling
+createReactNativeRenderer({ Text, View, Image }, { unstyled: true });
 ```
 
-Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
+`components` on the returned `Content` still works the same way, per-tag, for anything you want to swap out entirely (e.g. a tappable `EntryLink` that actually navigates — the default renders a plain styled `Text`, since navigation is app-specific).
+
+This package never imports the `react-native` package itself — you pass its `Text`/`View`/`Image` in, so nothing RN-specific ends up in a web or Vue bundle.
 
 ## Astro
 

package/dist/MDXContent.d.ts

@@ -10,8 +10,10 @@ export interface CompiledMDX {
 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).
+ * safe to call from a client-side effect or a Next.js Server Component (the
+ * `MDXContent` component below does the latter). Standard markdown elements (`p`,
+ * `h1`, `table`, ...) render via real DOM tags with zero setup; only a JSX component
+ * with no built-in default (e.g. `<Callout>`) needs `components`.
  */
 export declare function compileMDX(source: string): Promise<CompiledMDX | FailedMDX>;
 export interface MDXContentProps {

package/dist/MDXContent.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
-import { compileMDXCore } from "./core.js";
+import { compileMDXCore, makeDefaultEntryLink } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
 import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
+const defaultComponents = { EntryLink: makeDefaultEntryLink(runtime) };
 /**
  * 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).
+ * safe to call from a client-side effect or a Next.js Server Component (the
+ * `MDXContent` component below does the latter). Standard markdown elements (`p`,
+ * `h1`, `table`, ...) render via real DOM tags with zero setup; only a JSX component
+ * with no built-in default (e.g. `<Callout>`) needs `components`.
  */
 export async function compileMDX(source) {
-    return compileMDXCore(source, runtime);
+    return compileMDXCore(source, runtime, defaultComponents);
 }
 /**
  * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React (client-side

package/dist/MDXContent.test.d.ts

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

package/dist/MDXContent.test.js

@@ -0,0 +1,21 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { MDXContent } from "./MDXContent.js";
+// Smoke test for the Next.js App Router / RSC entry point — MDXContent is an async
+// Server Component; call it directly (as React's RSC runtime would) and inspect the
+// element tree it returns, same style as compileMDX.test.ts.
+test("MDXContent wraps compiled MDX in the styled wrapper element", async () => {
+    const element = (await MDXContent({ source: "# Hello" }));
+    assert.equal(element.type, "div");
+    assert.equal(element.props.className, "db-content");
+});
+test("unstyled drops the db-content class", async () => {
+    const element = (await MDXContent({ source: "# Hello", unstyled: true }));
+    assert.equal(element.props.className, undefined);
+});
+test("falls back to plain text when the source fails to compile as MDX", async () => {
+    const element = (await MDXContent({ source: "<broken" }));
+    const fallback = element.props.children;
+    assert.equal(fallback.type, "p");
+    assert.equal(fallback.props.children, "<broken");
+});

package/dist/compileMDX.test.js

@@ -3,14 +3,21 @@ import test from "node:test";
 import { compileMDX as compileReactMDX } from "./MDXContent.js";
 import { compileMDX as compileVueMDX } from "./vue.js";
 const SOURCE = "# Hello\n\nWorld";
+/** compileMDX's Content is wrapped to merge in default components (see core.ts) —
+ * unwrap by directly invoking each function-typed element until reaching real output,
+ * same "call it like a plain function" style as the rest of these tests (no renderer
+ * mounted). */
+function resolve(element) {
+    return typeof element.type === "function"
+        ? resolve(element.type(element.props))
+        : element;
+}
 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({});
+    const element = resolve(result.Content({}));
     assert.equal(element.props.children[0].type, "h1");
 });
 test("vue compileMDX evaluates the same MDX source into a Vue vnode tree", async () => {
@@ -18,7 +25,35 @@ test("vue compileMDX evaluates the same MDX source into a Vue vnode tree", async
     assert.equal(result.ok, true);
     if (!result.ok)
         return;
-    assert.equal(typeof result.Content, "function");
-    const vnode = result.Content({});
+    const vnode = resolve(result.Content({}));
     assert.equal(vnode.children[0].type, "h1");
 });
+test("react EntryLink renders as a link to /entries/{id} with no components map supplied", async () => {
+    const result = await compileReactMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const link = resolve(result.Content({}));
+    assert.equal(link.type, "a");
+    assert.equal(link.props.href, "/entries/abc123");
+});
+test("vue EntryLink renders as a link to /entries/{id} with no components map supplied", async () => {
+    const result = await compileVueMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const link = resolve(result.Content({}));
+    assert.equal(link.type, "a");
+    assert.equal(link.props.href, "/entries/abc123");
+});
+test("a supplied EntryLink override still wins over the default", async () => {
+    const result = await compileReactMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const CustomEntryLink = () => ({ type: "custom-entry-link", props: {} });
+    const link = resolve(result.Content({
+        components: { EntryLink: CustomEntryLink },
+    }));
+    assert.equal(link.type, "custom-entry-link");
+});

package/dist/core.d.ts

@@ -12,5 +12,17 @@ export interface FailedMDX {
  * 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.
+ *
+ * `defaultComponents`, when given, are merged underneath whatever the caller passes
+ * as `Content`'s own `components` prop (caller always wins per-tag) — this is what
+ * lets a framework entry point ship working defaults (e.g. a default `EntryLink`,
+ * or React Native's Text/View mapping) without requiring a mapping up front.
  */
-export declare function compileMDXCore<TComponent>(source: string, jsxRuntime: JsxRuntime): Promise<CompiledMDX<TComponent> | FailedMDX>;
+export declare function compileMDXCore<TComponent>(source: string, jsxRuntime: JsxRuntime, defaultComponents?: Record<string, unknown>): Promise<CompiledMDX<TComponent> | FailedMDX>;
+/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`.
+ * Covers the common case (a plain link to the entry's default route); apps that
+ * route entries differently still override it by passing `components.EntryLink`. */
+export declare function makeDefaultEntryLink(jsxRuntime: JsxRuntime): ({ id, children }: {
+    id?: string;
+    children?: unknown;
+}) => JSX.Element;

package/dist/core.js

@@ -5,19 +5,43 @@ 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.
+ *
+ * `defaultComponents`, when given, are merged underneath whatever the caller passes
+ * as `Content`'s own `components` prop (caller always wins per-tag) — this is what
+ * lets a framework entry point ship working defaults (e.g. a default `EntryLink`,
+ * or React Native's Text/View mapping) without requiring a mapping up front.
  */
-export async function compileMDXCore(source, jsxRuntime) {
+export async function compileMDXCore(source, jsxRuntime, defaultComponents) {
     try {
         const { default: Content } = await evaluate(source, {
             ...jsxRuntime,
             remarkPlugins: [remarkGfm],
             rehypePlugins: [rehypeSlug],
         });
+        const OutputContent = defaultComponents
+            ? withDefaultComponents(Content, defaultComponents, jsxRuntime)
+            : Content;
         // 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 };
+        return { ok: true, Content: OutputContent };
     }
     catch (error) {
         return { ok: false, error };
     }
 }
+function withDefaultComponents(Content, defaults, jsxRuntime) {
+    return function ContentWithDefaults(props) {
+        return jsxRuntime.jsx(Content, {
+            ...props,
+            components: { ...defaults, ...props?.components },
+        });
+    };
+}
+/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`.
+ * Covers the common case (a plain link to the entry's default route); apps that
+ * route entries differently still override it by passing `components.EntryLink`. */
+export function makeDefaultEntryLink(jsxRuntime) {
+    return function EntryLink({ id, children }) {
+        return jsxRuntime.jsx("a", { href: id ? `/entries/${id}` : undefined, children });
+    };
+}

package/dist/reactNative.d.ts

@@ -0,0 +1,31 @@
+import type { MDXComponents } from "mdx/types";
+import type { ComponentType } from "react";
+import { type FailedMDX } from "./core.js";
+import { type ReactNativePrimitives, type ReactNativeStyleOptions } from "./reactNativeComponents.js";
+export interface CompiledMDX {
+    ok: true;
+    Content: ComponentType<{
+        components?: MDXComponents;
+    }>;
+}
+export type { FailedMDX };
+/**
+ * Wires up a React Native `compileMDX` with default Text/View/Image mappings for
+ * every standard markdown element (and `EntryLink`), so a project sets up its RN
+ * primitives once instead of mapping every tag on every call:
+ *
+ * ```ts
+ * import { Text, View, Image } from "react-native";
+ * import { createReactNativeRenderer } from "@draftbase/renderer/react-native";
+ *
+ * const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
+ * ```
+ *
+ * Ships default styling that mirrors the web look (heading scale, link color, table
+ * layout, ...) — pass `styleOptions.unstyled` to drop it, or `styleOptions.styles` to
+ * override specific tags (`{ h1: { fontSize: 32 } }`). Pass `components` on the
+ * returned `Content` to override individual tags' component, same as the web entry point.
+ */
+export declare function createReactNativeRenderer(primitives: ReactNativePrimitives, styleOptions?: ReactNativeStyleOptions): {
+    compileMDX: (source: string) => Promise<CompiledMDX | FailedMDX>;
+};

package/dist/reactNative.js

@@ -0,0 +1,27 @@
+import * as runtime from "react/jsx-runtime";
+import { compileMDXCore } from "./core.js";
+import { buildReactNativeComponents, } from "./reactNativeComponents.js";
+/**
+ * Wires up a React Native `compileMDX` with default Text/View/Image mappings for
+ * every standard markdown element (and `EntryLink`), so a project sets up its RN
+ * primitives once instead of mapping every tag on every call:
+ *
+ * ```ts
+ * import { Text, View, Image } from "react-native";
+ * import { createReactNativeRenderer } from "@draftbase/renderer/react-native";
+ *
+ * const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
+ * ```
+ *
+ * Ships default styling that mirrors the web look (heading scale, link color, table
+ * layout, ...) — pass `styleOptions.unstyled` to drop it, or `styleOptions.styles` to
+ * override specific tags (`{ h1: { fontSize: 32 } }`). Pass `components` on the
+ * returned `Content` to override individual tags' component, same as the web entry point.
+ */
+export function createReactNativeRenderer(primitives, styleOptions) {
+    const defaultComponents = buildReactNativeComponents(primitives, styleOptions);
+    async function compileMDX(source) {
+        return compileMDXCore(source, runtime, defaultComponents);
+    }
+    return { compileMDX };
+}

package/dist/reactNative.test.d.ts

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

package/dist/reactNative.test.js

@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createReactNativeRenderer } from "./reactNative.js";
+// Fakes standing in for react-native's Text/View/Image — see reactNativeComponents.test.ts.
+const Text = () => null;
+const View = () => null;
+const Image = () => null;
+const LEAVES = [Text, View, Image];
+/** Unwraps nested function-component elements (the default-components wrapper, the
+ * per-tag style wrapper, ...) down to the RN primitive actually used, without calling
+ * into the primitive itself (Text/View/Image are opaque leaves here, not JSX). */
+function resolve(element) {
+    return typeof element.type === "function" && !LEAVES.includes(element.type)
+        ? resolve(element.type(element.props))
+        : element;
+}
+test("React Native smoke test: renders standard markdown through Text/View with zero setup beyond the three primitives", async () => {
+    const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
+    const result = await compileMDX("# Hello\n\nWorld");
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const element = resolve(result.Content({}));
+    const heading = resolve(element.props.children[0]);
+    assert.equal(heading.type, Text);
+    assert.equal(heading.props.style.fontSize, 28);
+});
+test("React Native EntryLink renders out of the box (no components map)", async () => {
+    const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
+    const result = await compileMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const element = resolve(result.Content({}));
+    assert.equal(element.type, Text);
+});

package/dist/reactNativeComponents.d.ts

@@ -0,0 +1,209 @@
+import type { ComponentType, ReactNode } from "react";
+export interface ReactNativePrimitives {
+    Text: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    View: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    Image: ComponentType<{
+        source: {
+            uri?: string;
+        };
+        accessibilityLabel?: string;
+        style?: unknown;
+    }>;
+}
+export interface ReactNativeStyleOptions {
+    /** Skip the built-in default styles (heading scale, link color, table borders, ...)
+     * entirely — components render with no `style` unless `styles` supplies one. */
+    unstyled?: boolean;
+    /** Per-tag style overrides, merged on top of the defaults (or used as-is under
+     * `unstyled`). Same tag keys as the components map, e.g. `{ h1: { fontSize: 32 } }`. */
+    styles?: Partial<Record<string, Record<string, unknown>>>;
+}
+/**
+ * Default MDX `components` map for React Native, built from its Text/View/Image
+ * primitives. RN has no intrinsic host tags for `p`/`h1`/`a`/etc the way web React
+ * does, so every standard markdown element needs an explicit mapping — this covers
+ * the common ones, styled to match the web default look (heading scale, link color,
+ * table layout, ...), so a project only wires up the three RN primitives once (via
+ * `createReactNativeRenderer`) instead of mapping and styling every tag itself.
+ */
+export declare function buildReactNativeComponents({ Text, View, Image }: ReactNativePrimitives, { unstyled, styles }?: ReactNativeStyleOptions): {
+    p: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h1: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h2: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h3: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h4: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h5: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h6: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    strong: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    em: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    del: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    code: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    pre: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    li: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    th: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    td: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    ul: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    ol: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    blockquote: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    hr: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    table: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    thead: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    tbody: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    tr: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    a: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    EntryLink: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    img: ({ src, alt }: {
+        src?: string;
+        alt?: string;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+};

package/dist/reactNativeComponents.js

@@ -0,0 +1,53 @@
+import * as runtime from "react/jsx-runtime";
+import { defaultReactNativeStyles } from "./reactNativeStyles.js";
+/**
+ * Default MDX `components` map for React Native, built from its Text/View/Image
+ * primitives. RN has no intrinsic host tags for `p`/`h1`/`a`/etc the way web React
+ * does, so every standard markdown element needs an explicit mapping — this covers
+ * the common ones, styled to match the web default look (heading scale, link color,
+ * table layout, ...), so a project only wires up the three RN primitives once (via
+ * `createReactNativeRenderer`) instead of mapping and styling every tag itself.
+ */
+export function buildReactNativeComponents({ Text, View, Image }, { unstyled, styles } = {}) {
+    const styleFor = (tag) => unstyled ? styles?.[tag] : { ...defaultReactNativeStyles[tag], ...styles?.[tag] };
+    function styled(Base, tag) {
+        const style = styleFor(tag);
+        if (!style || Object.keys(style).length === 0)
+            return Base;
+        return (props) => runtime.jsx(Base, { ...props, style: props.style ? [style, props.style] : style });
+    }
+    const Img = ({ src, alt }) => runtime.jsx(Image, {
+        source: { uri: src },
+        accessibilityLabel: alt,
+        style: styleFor("img"),
+    });
+    const Link = styled(({ children, style }) => runtime.jsx(Text, { children, style }), "a");
+    return {
+        p: styled(Text, "p"),
+        h1: styled(Text, "h1"),
+        h2: styled(Text, "h2"),
+        h3: styled(Text, "h3"),
+        h4: styled(Text, "h4"),
+        h5: styled(Text, "h5"),
+        h6: styled(Text, "h6"),
+        strong: styled(Text, "strong"),
+        em: styled(Text, "em"),
+        del: styled(Text, "del"),
+        code: styled(Text, "code"),
+        pre: styled(Text, "pre"),
+        li: styled(Text, "li"),
+        th: styled(Text, "th"),
+        td: styled(Text, "td"),
+        ul: styled(View, "ul"),
+        ol: styled(View, "ol"),
+        blockquote: styled(View, "blockquote"),
+        hr: styled(View, "hr"),
+        table: styled(View, "table"),
+        thead: View,
+        tbody: View,
+        tr: styled(View, "tr"),
+        a: Link,
+        EntryLink: Link,
+        img: Img,
+    };
+}

package/dist/reactNativeComponents.test.d.ts

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

package/dist/reactNativeComponents.test.js

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { buildReactNativeComponents } from "./reactNativeComponents.js";
+// Stand-ins for react-native's Text/View/Image — this package doesn't depend on
+// react-native itself (it only resolves inside Metro, not plain Node), so the mapping
+// logic is tested against fakes with the same shape.
+const Text = () => null;
+const View = () => null;
+const Image = () => null;
+test("maps standard markdown elements onto Text/View, with default styling applied", () => {
+    const components = buildReactNativeComponents({ Text, View, Image });
+    const h1 = components.h1({});
+    assert.equal(h1.type, Text);
+    assert.equal(h1.props.style.fontSize, 28);
+    const table = components.table({});
+    assert.equal(table.type, View);
+    const tr = components.tr({});
+    assert.equal(tr.props.style.flexDirection, "row");
+});
+test("unstyled drops the defaults", () => {
+    const components = buildReactNativeComponents({ Text, View, Image }, { unstyled: true });
+    assert.equal(components.h1, Text); // no style to apply -> returns the primitive directly
+});
+test("styles option overrides a specific tag without needing unstyled", () => {
+    const components = buildReactNativeComponents({ Text, View, Image }, { styles: { h1: { fontSize: 40 } } });
+    const h1 = components.h1({});
+    assert.equal(h1.props.style.fontSize, 40);
+    assert.equal(h1.props.style.fontWeight, "700"); // default still applied
+});
+test("img wrapper passes src through as Image's source.uri", () => {
+    const components = buildReactNativeComponents({ Text, View, Image });
+    const element = components.img({ src: "https://example.com/a.png", alt: "a" });
+    const props = element.props;
+    assert.equal(props.source.uri, "https://example.com/a.png");
+    assert.equal(props.accessibilityLabel, "a");
+});
+test("a and EntryLink both render as styled Text", () => {
+    const components = buildReactNativeComponents({ Text, View, Image });
+    assert.equal(components.EntryLink, components.a);
+    const element = components.a({ children: "hi" });
+    const inner = element.type(element.props);
+    assert.equal(inner.type, Text);
+    assert.equal(inner.props.style.color, "#2563eb");
+});

package/dist/reactNativeStyles.d.ts

@@ -0,0 +1,4 @@
+/** Default per-tag style objects for the React Native preset — mirrors `styles.css`'s
+ * web defaults (heading scale, link color/underline, code/blockquote treatment, list
+ * spacing) so RN output looks like the web default instead of unstyled plain text. */
+export declare const defaultReactNativeStyles: Record<string, Record<string, unknown>>;

package/dist/reactNativeStyles.js

@@ -0,0 +1,46 @@
+/** Default per-tag style objects for the React Native preset — mirrors `styles.css`'s
+ * web defaults (heading scale, link color/underline, code/blockquote treatment, list
+ * spacing) so RN output looks like the web default instead of unstyled plain text. */
+export const defaultReactNativeStyles = {
+    p: { marginBottom: 12, lineHeight: 22 },
+    h1: { fontSize: 28, fontWeight: "700", marginTop: 20, marginBottom: 10 },
+    h2: { fontSize: 24, fontWeight: "700", marginTop: 18, marginBottom: 8 },
+    h3: { fontSize: 20, fontWeight: "700", marginTop: 16, marginBottom: 8 },
+    h4: { fontSize: 18, fontWeight: "600", marginTop: 14, marginBottom: 6 },
+    h5: { fontSize: 16, fontWeight: "600", marginTop: 12, marginBottom: 6 },
+    h6: { fontSize: 14, fontWeight: "600", marginTop: 12, marginBottom: 6 },
+    strong: { fontWeight: "700" },
+    em: { fontStyle: "italic" },
+    del: { textDecorationLine: "line-through" },
+    code: {
+        fontFamily: "Courier",
+        backgroundColor: "#f2f2f2",
+        paddingHorizontal: 4,
+        borderRadius: 3,
+    },
+    pre: {
+        fontFamily: "Courier",
+        backgroundColor: "#f2f2f2",
+        padding: 12,
+        borderRadius: 6,
+        marginBottom: 12,
+    },
+    blockquote: {
+        borderLeftWidth: 3,
+        borderLeftColor: "#d0d0d0",
+        paddingLeft: 12,
+        marginBottom: 12,
+        opacity: 0.85,
+    },
+    li: { marginBottom: 4 },
+    ul: { marginBottom: 12 },
+    ol: { marginBottom: 12 },
+    hr: { borderBottomWidth: 1, borderBottomColor: "#d0d0d0", marginVertical: 16 },
+    table: { borderWidth: 1, borderColor: "#d0d0d0", marginBottom: 12 },
+    // RN has no native table layout — `tr` lays cells out as a row (flex), `th`/`td` split
+    // the row evenly; only a bottom rule separates rows (no per-cell borders, unlike web).
+    tr: { flexDirection: "row", borderBottomWidth: 1, borderColor: "#d0d0d0" },
+    th: { flex: 1, fontWeight: "700", padding: 6 },
+    td: { flex: 1, padding: 6 },
+    a: { color: "#2563eb", textDecorationLine: "underline" },
+};

package/dist/vue.d.ts

@@ -8,6 +8,7 @@ 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" />`.
+ * yourself: `h(Content, props)` or `<component :is="Content" />`. Standard markdown
+ * elements render via real DOM tags with zero setup.
  */
 export declare function compileMDX(source: string): Promise<CompiledMDX | FailedMDX>;

package/dist/vue.js

@@ -1,10 +1,12 @@
-import { compileMDXCore } from "./core.js";
+import { compileMDXCore, makeDefaultEntryLink } from "./core.js";
 import { vueJsxRuntime } from "./vueRuntime.js";
+const defaultComponents = { EntryLink: makeDefaultEntryLink(vueJsxRuntime) };
 /**
  * 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" />`.
+ * yourself: `h(Content, props)` or `<component :is="Content" />`. Standard markdown
+ * elements render via real DOM tags with zero setup.
  */
 export async function compileMDX(source) {
-    return compileMDXCore(source, vueJsxRuntime);
+    return compileMDXCore(source, vueJsxRuntime, defaultComponents);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",
@@ -31,6 +31,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./vue": "./dist/vue.js",
+    "./react-native": "./dist/reactNative.js",
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -41,7 +42,7 @@
   "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"
+    "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js dist/reactNativeComponents.test.js dist/reactNative.test.js dist/MDXContent.test.js"
   },
   "peerDependencies": {
     "react": ">=18",