Puck 0.23 requires Node 20 and includes updates to the outline and canvas drag-and-drop.

This guide covers the steps for upgrading to Puck 0.23:

• Installing Puck 0.23
• Breaking changes
• New deprecations
• Notable changes
• Full changelog

If you encounter any bugs as you upgrade to Puck 0.23, please report them via GitHub.

For a list of all the new features added to Puck 0.23, check out the release blog post.

Installing Puck 0.23

Run the following command to install the latest version of Puck:

npm install @puckeditor/core@latest

pnpm add @puckeditor/core@latest

yarn add @puckeditor/core@latest

bun add @puckeditor/core@latest

Breaking changes

@puckeditor/core now requires Node 20

Puck now requires Node 20 or later. If you’re on an older version, npm and pnpm will now warn (or fail, depending on your setup). Update Node to version 20 or later in your local environment and CI before upgrading.

{
  "engines": {
    "node": ">=20.0.0"
  }
}

New deprecations

No deprecations were introduced in this release.

Notable changes

New drag-and-drop behavior

The <Puck> component uses new animation behavior when you drag components in the canvas. It now shows an insertion line when adding new components or moving existing ones between slots.

To keep the previous behavior, where components always animate out of the way, set dnd.behavior to "fluid":

<Puck dnd={{ behavior: "fluid" }} />

New outline

The outline has been reimplemented to support new features and improve its design.

Design changes

The new outline design includes the following visual updates:

• The outline panel now has a header with a “Collapse all” button.
• The panel and component rows use less padding.
• If a component has a single slot, the slot name is not shown when expanded.
• Slot names are no longer forced to uppercase.
• Components with slots now have bold labels.
• Nested components use new indentation.

The following defaults for the outline theming tokens have also changed:

--puck-outline-color-text-hover now controls the color of a slot name when it is targeted during drag-and-drop.

To retain the defaults from Puck 0.22, add these mappings to your theme:

.Container {
  --puck-outline-font-size: var(--puck-font-size-xxs);
  --puck-outline-zone-font-size: var(--puck-font-size-xxxs);
  --puck-outline-color-icon: var(--puck-color-highlight);
  --puck-outline-icon-size: var(--puck-icon-size-s);
  --puck-outline-space-indent: var(--puck-space-3);
}

See the outline theming reference for all available tokens.

Drag and drop

The outline panel now supports drag-and-drop for reordering components. It respects permissions and config-level allow and disallow during drag-and-drop.

If you use <Slot allow /> or <Slot disallow />, move those rules to field definitions so they apply on both the canvas and the outline:

// Before
const config = {
  components: {
    Grid: {
      fields: {
        items: { type: "slot" },
      },
      render: ({ items: Items }) => <Items allow={["Card"]} />,
    },
  },
};

// After
const config = {
  components: {
    Grid: {
      fields: {
        items: {
          type: "slot",
          allow: ["Card"],
        },
      },
      render: ({ items: Items }) => <Items />,
    },
  },
};

To turn off outline drag-and-drop, set the dnd.disableOutlineDrag prop to true:

<Puck dnd={{ disableOutlineDrag: true }} config={config} data={data} />

Full changelog

Check out the full changelog, including known issues, on the GitHub release.