One CMS, every JavaScript framework
Draftbase ships native MDX rendering for React and Next.js, React Native, Astro, Remix, and Vue — one typed SDK and the same compileMDX() API shape across all of them. Everything else talks to the same fetch-based SDK directly.
Native rendering
A drop-in renderer, not just a data client. React-based frameworks use @draftbase/renderer; Vue uses the separate @draftbase/renderer/vue entry point — same compileMDX(source) call, same { ok, Content } return shape, no framework-specific mental model to relearn.
Next.js
NativeApp Router and Server Components call cms.getEntry() directly at render time, then render it via <MDXContent> — no client-side data-fetching layer needed.
React
Native@draftbase/renderer’s <MDXContent> evaluates an entry’s MDX field and renders it as real JSX, with your own components dropped in via a components map.
React Native
NativeThe same compileMDX() call from @draftbase/renderer — it’s plain React under the hood, so it runs unmodified with your app’s native components as the components map.
Vue
NativecompileMDX() from @draftbase/renderer/vue evaluates the same MDX into a real Vue vnode tree — no separate parser, same API shape as the React entry point.
Astro
NativeCompile server-side in the frontmatter, then hand the result to a small React island (@astrojs/react) to render.
Remix
NativePlain React, no RSC required — call compileMDX() from a loader and render the result.
Fetch-based SDK, no dedicated renderer
These call the same typed, read-only delivery API through @draftbase/sdk — a plain fetch client with no browser-only or Node-only APIs — without a framework-specific renderer package.
Svelte / SvelteKit
SDKNo shared vnode model with MDX’s JSX runtime, so this one stays fetch-only: pull typed fields and an MDX string, render with toHtml() or Svelte’s own MDX tooling (e.g. mdsvex).
Node.js / Express
SDKNo UI to render — the SDK is a plain fetch client usable from any Node runtime for scripts, feeds, or server-side jobs.
How framework support works
Every framework talks to the same read-only delivery API, gated by an API key and separate from the management API used to author content. That single surface is what makes broad framework support possible without a renderer for each one.
Typed fields everywhere
@draftbase/sdk generates a typed client from your template schema, so entry.fields is typed the same way whether it's called from a Next.js Server Component or a Vue composable.
No framework-specific build
The SDK is plain fetch calls and plain objects — no browser globals, no Node-only APIs. It runs unmodified in a server runtime, a browser bundle, or React Native.
A shared JSX runtime, not a shared UI framework
React and Vue can both back compileMDX() because they each accept a pluggable JSX runtime. Svelte compiles to its own reactive primitives instead, so its entries stay a plain MDX string, renderable with toHtml() or Svelte's own MDX tooling.
Cacheable, revalidatable delivery
Reads are safe to cache at the framework's edge layer and revalidate on a webhook when an entry publishes, regardless of which framework fetched them.
Start building on your framework
Define a template once, fetch it from any JavaScript stack, and publish an entry in one sitting.
Frequently asked questions
Which frameworks does Draftbase render MDX for natively?
@draftbase/renderer ships a dedicated JSX-runtime integration for React, Next.js, React Native, Astro, and Remix (all plain React under the hood), and a separate entry point, @draftbase/renderer/vue, for Vue. Both expose the identical compileMDX(source) API — { ok: true, Content } or { ok: false, error } — so switching frameworks means changing the import, not the calling code.
Is there a Svelte CMS renderer?
Not a dedicated one, and there isn’t likely to be — Svelte compiles to its own reactive primitives rather than JSX vnodes, so there’s no shared runtime to hook into the way React and Vue share one. @draftbase/sdk still returns typed fields and a plain MDX string, renderable with toHtml() or Svelte’s own MDX tooling (mdsvex).
Does adding Vue support make my React bundle bigger?
No. @draftbase/renderer and @draftbase/renderer/vue are separate entry points that each import only their own framework — a React app never resolves Vue, and vice versa. Both react and vue are optional peer dependencies.
Do I need a specific Node.js version or framework to use the SDK?
No. @draftbase/sdk is a plain fetch-based client with generated types from your template schema. It runs in any modern Node.js runtime, in a browser, or in React Native, independent of framework.
Can I use Draftbase with a static site generator like Astro?
Yes. Compile MDX at build time inside an Astro frontmatter block for a fully static page, or at request time for SSR output — then render it through a React island.