> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-docs-branch.mintlify.site/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-docs-branch/N7kCh72DcEqcoNG6/images/custom-breakpoints.png?fit=max&auto=format&n=N7kCh72DcEqcoNG6&q=85&s=508d89d34560a41a4cdaa7aa95286873" 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/react";

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/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" },
  },
})
```