> 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.

# constructor

> The `ReactRuntime` is the bridge between Makeswift and your app. It tells the Makeswift builder about the schema of your components and which breakpoints to use.

The `ReactRuntime` is the bridge between Makeswift and your app. It tells the Makeswift builder about the schema of your components and which breakpoints to use.

## Options

**`breakpoints`** `Record<string, Breakpoint>`

An optional object with custom breakpoints for the Makeswift builder.

```ts
type Breakpoint = {
  // max width for the CSS media query
  width: number;
  // text displayed in the Makeswift builder
  label?: string;
  // Makeswift builder preview width
  viewport?: number;
};
```

#### Where are these breakpoints in the Makeswift builder?

![](/_fern-img/48e1a997ecd1372265c86b6d9e0f815ce4a13768fc2b6b4bb61a33dc3d9b1126.webp)

---

## Examples

### Basic usage

**`src/makeswift/runtime.ts`**

```ts src/makeswift/runtime.ts
import { ReactRuntime } from "@makeswift/runtime/react";

export const runtime = new ReactRuntime();
```

### Custom breakpoints

The following example instantiates a new `ReactRuntime` with 4 custom breakpoints.

**`makeswift/runtime.ts`**

```ts makeswift/runtime.ts
import { ReactRuntime } from "@makeswift/runtime/react"

export const runtime = new ReactRuntime({
  breakpoints: {
    mobile: { width: 575, viewport: 390, label: "Mobile" },
    tablet: { width: 768, viewport: 765, label: "Tablet" },
    laptop: { width: 1024, viewport: 1000, label: "Laptop" },
    external: { width: 1280, label: "External" },
  },
})
```

## Changelog

| Version                                                                                          | Changes                                                                                                       |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| [`v0.27.0`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.27.0) | `ReactRuntime` import for Next.js has been moved from `@makeswift/runtime/react` to `@makeswift/runtime/next` |