Viewports

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

Default viewports

Puck provides 3 viewports by default:

1. Small: 360px wide
2. Medium: 768px wide
3. Large: 1280px wide

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 (
    <Puck
      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 Puck UI.
        },
      ]}
      // ...
    />
  );
}

Opting out of iframes

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

export function Editor() {
  return (
    <Puck
      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 <Puck.Preview />.

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

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