Skip to main content

​
Options

​
breakpoints
Record<string, Breakpoint>
An optional object with custom breakpoints for the Makeswift builder.
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;
};

​
Examples

​
Basic usage

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

export const runtime = new ReactRuntime();

​
Custom breakpoints

The following example instantiates a new ReactRuntime with 4 custom breakpoints.
makeswift/runtime.ts
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

VersionChanges
v0.27.0ReactRuntime import for Next.js has been moved from @makeswift/runtime/react to @makeswift/runtime/next