> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

## Options

<ParamField query="breakpoints" type="Record<string, Breakpoint>">
  An optional object with custom breakpoints for the Makeswift builder.

  ```ts theme={null}
  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;
  };
  ```

  <Accordion title="Where are these breakpoints in the Makeswift builder?">
    <Frame>
      <img src="https://mintcdn.com/makeswift/pZUQIXY0VZyiTaM2/images/custom-breakpoints.png?fit=max&auto=format&n=pZUQIXY0VZyiTaM2&q=85&s=45dc2249f8627a3ad926960bc932945e" width="1024" height="640" data-path="images/custom-breakpoints.png" />
    </Frame>
  </Accordion>
</ParamField>

## Examples

### Basic usage

```ts src/makeswift/runtime.ts theme={null}
import { ReactRuntime } from "@makeswift/runtime/next";

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

### Custom breakpoints

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

```ts makeswift/runtime.ts theme={null}
import { ReactRuntime } from "@makeswift/runtime/next";

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