Puck 0.23 improves drag-and-drop to reduce layout shift, adds a draggable outline for reordering components, and introduces a Dictionary API for translating the editor UI into any language.

In this post, we’ll go over everything new in Puck 0.23 and how you can start using it:

• What’s new in Puck 0.23
• Other changes
• How to upgrade
• Full changelog
• Contributors

If you’re upgrading from an earlier version, review the upgrade guide for any breaking changes and migration tips.

You can also find more in-depth documentation for each new feature in our docs.

What’s new in Puck 0.23

New canvas drag-and-drop

Puck 0.23 introduces new drag-and-drop behavior aimed at reducing layout shift, configurable as three behaviors.

"auto" (default)

Moves other components out of the way when reordering within the same slot, but shows an insertion line when adding components or moving them between slots.

"static"

Shows an insertion line at the drop destination.

"fluid"

Moves other components out of the way as you drag. This is the legacy behavior.

Use the dnd.behavior prop to select a behavior:

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

New outline

The outline has been redesigned to be more useful for deeply nested layouts. It supports deleting, duplicating, and reordering components.

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

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

Upgrading to the new outline may require changes to your slot configuration. See the upgrade guide for details.

Dictionary API

Puck 0.23 introduces a dictionary prop for translating or rewording every string shown in the editor UI:

<Puck
  dictionary={{
    "header-publish": "Publicar",
    "field-richtext-bold": "Negrita",
    "viewport-switch": "Cambiar a {label}",
  }}
  config={config}
  data={data}
/>

The dictionary supports string interpolation and reacts to changes, so you can swap languages on the fly using state or localization libraries.

You can also add your own keys to the dictionary and read them from the Puck API. This is useful for keeping all strings in one place:

<Puck
  dictionary={{
    "saved-state": "Saved",
  }}
  overrides={{
    HeaderActions: ({ children }) => {
      const savedMsg = usePuck((s) => s.dictionary["saved-state"]);
 
      return (
        <div>
          <span>{savedMsg}</span>
          {children}
        </div>
      );
    },
  }}
/>

See the localization guide for more details.

New Puck agent skill

The new Puck skill helps coding agents follow best practices when working with Puck and Puck AI. Install it with:

npx skills add puckeditor/skills --skill puck

Use it to generate Puck components, update your config, or add Puck and Puck AI features:

Use the Puck skill to create a config using all the components in `src/components`

Other changes

New theming tokens

This release adds new global and component-level tokens for theming Puck.

Global tokens

• --puck-color-line-placeholder: the drag-and-drop insertion line
• --puck-icon-size-xs: the size of the outline’s layer and zone icons
• --puck-line-placeholder-width: the drag-and-drop insertion line thickness

Outline tokens

• --puck-outline-color-drop-indicator: the drop line color
• --puck-outline-color-text-helper: the empty-zone label text color
• --puck-outline-font-family: the font family
• --puck-outline-icon-size: the layer and zone icon size
• --puck-outline-action-size: the expand caret and row action icon size
• --puck-outline-space-indent: the indentation per nesting level

See the theming guide for a list of all theming tokens.

How to upgrade

To upgrade your Puck application to 0.23, follow the upgrade guide for step-by-step instructions. It covers the Node requirement, outline changes, and drag-and-drop preview changes.

Full changelog

You can find the full changelog, including bug fixes and known issues, in the GitHub release.

Contributors

• fasenderos