> ## Documentation Index > Fetch the complete documentation index at: https://makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # > The `` component takes a Makeswift runtime and provides it to the [``](/developer/reference/components/page) component for rendering snapshots. ## Props A Makeswift [runtime](/developer/reference/runtime/constructor). When set to `true`, the preview version of a page will be rendered. See [example](#example) below for usage. The children components to render.

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

This is required if your site supports more than one locale. ## Example The following example shows how the `` is used to implement the `` client component as outlined in step 9 of the [App Router Installation guide](/developer/app-router/installation). The `` is subsequently utilized in the App Router's [root layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts). ```tsx src/makeswift/provider.tsx "use client"; import { runtime } from "@/makeswift/runtime"; import { ReactRuntimeProvider, RootStyleRegistry, } from "@makeswift/runtime/next"; import "@/makeswift/components"; export function MakeswiftProvider({ children, previewMode, }: { children: React.ReactNode; previewMode: boolean; }) { return ( {children} ); } ``` ```tsx src/app/layout.tsx import type { Metadata } from "next"; import { draftMode } from "next/headers"; import { Inter } from "next/font/google"; 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 ( {children} ); } ``` The following example shows how to add a `` 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/pages-router/installation). The `previewMode` property is returned from `getStaticProps` in an optional catch-all route. ```tsx src/pages/_app.tsx import type { AppProps } from "next/app"; import { ReactRuntimeProvider } from "@makeswift/runtime/next"; import { runtime } from "@/makeswift/runtime"; import "@/makeswift/components"; export default function App({ Component, pageProps: { previewMode, locale, ...pageProps }, }: AppProps) { return ( ); } ``` ```tsx src/pages/[[...path]].tsx import { Makeswift } from "@makeswift/runtime/next"; export async function getStaticProps({ params, previewData }) { // ... return { props: { // ... previewMode: Makeswift.getPreviewMode(previewData), }, }; } ```