Viewports

The React Editor preview renders in a same-origin iframe that can be resized to simulate different viewports.

Default viewports

React Editor provides 4 viewports by default:

1. Small: 360px wide
2. Medium: 768px wide
3. Large: 1280px wide
4. Full-width: Fit the container

Each of the default viewports have 100% height, filling the available space (via the auto height parameter).

Customizing viewports

Customizing the available viewports using the viewports API:

export function Editor() {
  return (
    <Editor
      viewports={[
        {
          width: 1440,
          height: "auto", // Optional height. Can be numeric or "auto". Defaults to "auto".
          label: "My Viewport", // Optional. Shown in tooltip.
          icon: <svg />, // Optional. Use lucide-icons to align with React Editor UI.
        },
      ]}
      // ...
    />
  );
}

Opting out of iframes

Opt-out of iframe rendering by using the iframe API:

export function Editor() {
  return (
    <Editor
      iframe={{
        enabled: false,
      }}
      // ...
    />
  );
}

This will disable all viewport functionality.

Controlling viewports with compositional interfaces

When implementing a compositional interface, the viewports API will have no effect. Instead, the viewport size can be controlled by the dimensions of the wrapping element that contains <Editor.Preview />.

CSS transforms can be used to zoom the viewport without impacting drag-and-drop behaviour.

import { Editor } from "@reacteditor/core";
 
export function Editor() {
  return (
    <Editor>
      <div style={{ transform: "scale(0.5)", width: 1280 }}>
        <Editor.Preview />
      </div>
    </Editor>
  );
}