Puck 0.14: Viewport switching

Puck v0.14 introduces the long awaited viewport switching feature, with drag-and-drop-friendly iframe rendering for full CSS media query support.

TLDR

1. Viewport switching: Render your entire Puck preview inside an iframe for full CSS media query support. Override the viewports using the viewports API.
2. New field APIs: Array and number fields now accept min/max params, and external fields can now render search filters using the familiar fields API.
3. New component label API: Provide a custom label to use as your component name.
4. Contentful field package: Easily load your Contentful content into Puck with this pre-configured field.
5. Color, accessibility and keyboard improvements: A new 12-tint color palette for improved contrast, amongst various other accessibility fixes.

Highlights

📱 Viewport switching

Puck now supports viewport switching with full iframe rendering, without compromising the drag-and-drop experience. This was a significant effort that required patching the underlying drag-and-drop library to support iframes and CSS transforms, and introducing a new library for syncing styles between host and iframe.

Viewports are enabled by default, and can be customized by passing an array to the viewports API.

import { Puck } from "@measured/puck";

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

🔢 New field APIs

Both number and array fields now accept min and max parameters, allowing you to control the minimum and maximum values (or number of values) for user input. Thanks to @jabba-the-bug and @jperasmus for their contributions.

const numberField =  {
  type: "number",
  max: 10,
};

The new filterFields API on external fields allows you to render filters that are provided to your fetchList method using the familiar fields API.

const externalField = {
  type: "external",
  fetchList: async ({ filters }) => {
    // Query content and apply filters
  },
  filterFields: {
    rating: {
      type: "number", // Render a number field
    },
  },
},

🔡 New component label API

Customize the name of your component with the new label API. Thanks to @bwat-dev for contributing this feature.

const config = {
  components: {
    HeadingBlock: {
      label: "Heading Block",
      render: () => <h1>Hello, World</h1>,
    },
  },
};

Contentful field package

Use the new field-contentful package to load content out of your Contentful space.

import createFieldContentful from "@measured/puck-field-contentful";

const config = {
  components: {
    Example: {
      fields: {
        movie: createFieldContentful("movies", {
          space: "my_space",
          accessToken: "abcdefg123456",
        }),
      },
      render: ({ data }) => {
        return <p>{data?.fields.title || "No data selected"}</p>;
      },
    },
  },
};

Breaking changes

iframes are enabled by default

Viewport rendering with iframes is enabled by default. If you need to disable this, you can pass iframes={{ enabled: false }} to the Puck component.

Changelog

See the GitHub release for a full changelog.