> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# <ReactRuntimeProvider>

> The `<ReactRuntimeProvider>` component takes a Makeswift runtime and provides it to the [`<Page>`](/developer/docs/reference/components/page) component for rendering snapshots.

The `<ReactRuntimeProvider>` component takes a Makeswift runtime and provides it to the [`<Page>`](/developer/docs/reference/components/page) component for rendering snapshots.

## Props

**`runtime`** `Runtime` — required

A Makeswift [runtime](/developer/docs/reference/reactruntime/constructor).

---

**`siteVersion`** `SiteVersion` — required

Determines which version of the site to render. If `null` is passed,
then the published site content will be rendered.

---

**`children`** `React.Node`

The children components to render.

---

**`locale`** `string`

A valid locale string (ex. `"en-US"`).

> **Note**
>
> This is required if your site supports
> more than one locale.

---

## Example

#### App Router

The following example shows how the `<ReactRuntimeProvider>` is used to implement the `<MakeswiftProvider>` client component as outlined in step 9 of the [App Router Installation guide](/developer/docs/get-started/installation/app-router). The `<MakeswiftProvider>` is subsequently utilized in the App Router's [root layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts).

**`src/makeswift/provider.tsx`**

```tsx src/makeswift/provider.tsx
"use client";

import { runtime } from "@/makeswift/runtime";
import { type SiteVersion } from "@makeswift/runtime/next";
import {
  ReactRuntimeProvider,
  RootStyleRegistry,
} from "@makeswift/runtime/next";
import "@/makeswift/components";

export function MakeswiftProvider({
  children,
  siteVersion,
}: {
  children: React.ReactNode;
  siteVersion: SiteVersion | null;
}) {
  return (
    <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}
```

**`src/app/layout.tsx`**

```tsx src/app/layout.tsx
import type { Metadata } from "next";
import { draftMode } from "next/headers";
import { Inter } from "next/font/google";
import { getSiteVersion } from "@makeswift/runtime/next/server"
import { MakeswiftProvider } from "@/makeswift/provider";
import "@/makeswift/components";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <MakeswiftProvider siteVersion={await getSiteVersion()}>
          {children}
        </MakeswiftProvider>
      </body>
    </html>
  );
}
```

#### Pages Router

The following example shows how to add a `<ReactRuntimeProvider>` to a [Custom App](https://nextjs.org/docs/pages/building-your-application/routing/custom-app) as outlined in step 10 of the [Pages Router Installation guide](/developer/docs/get-started/installation/pages-router). The `siteVersion` property is returned from `getStaticProps` in an optional catch-all route.

**`src/pages/_app.tsx`**

```tsx src/pages/_app.tsx
import type { AppProps } from "next/app";
import {
  ReactRuntimeProvider,
  RootStyleRegistry,
} from "@makeswift/runtime/next";

import { runtime } from "@/makeswift/runtime";
import "@/makeswift/components";

export default function App({
  Component,
  pageProps: { siteVersion, ...pageProps },
}: AppProps) {
  return (
    <ReactRuntimeProvider runtime={runtime} siteVersion={siteVersion}>
      <RootStyleRegistry>
        <Component {...pageProps} />
      </RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}
```

**`src/pages/[[...path]].tsx`**

```tsx src/pages/[[...path]].tsx
import { Makeswift } from "@makeswift/runtime/next";

export async function getStaticProps({ params, previewData }) {
  // ...
  const siteVersion = Makeswift.getSiteVersion(previewData);

  return {
    props: {
      // ...
      siteVersion,
    },
  };
}
```

## Changelog

| Version                                                                                          | Changes                                                   |
| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
| [`v0.25.0`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.25.0) | Replace the `previewMode` boolean prop with `siteVersion` |