# `@replohq/sandbox-runtime`

The Replo sandbox runtime connects a Next.js development preview to Replo while
preserving normal application behavior in production. It provides preview
readiness, navigation, error reporting, selection, annotations, and design
library preview support through one root component.

## Installation

```sh
pnpm add @replohq/sandbox-runtime @replohq/sdk @opennextjs/cloudflare @tanstack/react-query
```

The package requires Next.js 15 or newer and React 19 or newer. React, React
DOM, and their type packages are peer dependencies and are normally already
present in a Next.js application.

## Usage

Compose `SandboxRuntime` inside the SDK's `ReploProvider` in the root layout:

```tsx
// app/layout.tsx
import { SandboxRuntime } from "@replohq/sandbox-runtime";
import { ReploProvider } from "@replohq/sdk/providers/replo-provider";

export default function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html lang="en">
      <body>
        <ReploProvider>
          <SandboxRuntime>{children}</SandboxRuntime>
        </ReploProvider>
      </body>
    </html>
  );
}
```

`SandboxRuntime` is a Client Component. In a development server it enables the
Replo preview integration. In a production build it renders `children`
unchanged, so the same composition can remain in the root layout for every
environment.

## License

This package is proprietary software. See [LICENSE](./LICENSE)
(`SEE LICENSE IN LICENSE`) and the [Replo Terms of Service](https://replo.app/terms).