Starstruk Logo MarkStarstruk

v0.22.0

puckeditor/puckv0.22.0Jun 25, 2026by FedericoBonel

AI Summary

Puck 0.22 introduces theming, automatic CSS loading, and iframe style sync controls. This release allows users to customize the editor UI with CSS variables and provides more granular control over how styles are applied within the preview iframe.

Key Highlights

  • Introduces theming support using CSS custom properties to customize the default editor UI.
  • Adds automatic CSS loading to inject stylesheets on demand.
  • Introduces the `iframe.syncHostStyles` prop to control style synchronization into the preview.
  • Exposes root data in the `resolveData` API for better data handling.

New Features

  • Add `iframe.syncHostStyles` prop for controlling style sync.
  • Add theming support with CSS variables.
  • Expose root to `resolveData` API.
  • Load CSS dynamically if missing.
  • Remove remix recipe from `create-puck-app`.

Full Release Notes

Puck 0.22 introduces theming, automatic CSS loading, iframe style sync controls, and more.

[Puck 0.22.0.webm](https://github.com/user-attachments/assets/6030432a-2c07-4a7e-88d9-4572db4fc8d1)


This is a summary of the main new features and full changelog.

**Read the [full release post](https://puckeditor.com/blog/puck-022) on our blog.**

## Summary

- [**Theming**](https://puckeditor.com/docs/extending-puck/theming): customize the default editor UI using CSS custom properties.
- **Automatic CSS loading:** Puck now injects its stylesheet on demand.
- [**`iframe.syncHostStyles`**](https://puckeditor.com/docs/api-reference/components/puck#synchoststyles): control whether Puck syncs host styles into the preview iframe.
- [**Root data in `resolveData`**](https://puckeditor.com/docs/api-reference/configuration/component-config#resolvedatadata-params): access root data from `resolveData`.

## Full changelog

### Features

* add iframe.syncHostStyles prop for controlling style sync ([1496ae3](https://github.com/puckeditor/puck/commit/1496ae34e48e2b3e92d2fe8461f98a2615b345d2))
* add theming support with CSS variables ([d4c8bcf](https://github.com/puckeditor/puck/commit/d4c8bcf2dce09cc174ab405cf1d5cd39239a7c99))
* expose root to resolveData API ([caeacf9](https://github.com/puckeditor/puck/commit/caeacf979cced77c476066bff23b819eb5333fdb))
* load CSS dynamically if missing ([3c1f5e4](https://github.com/puckeditor/puck/commit/3c1f5e4fbf487de57a0c60eb12bd4a30703b665e))
* remove remix recipe from create-puck-app ([d2c2761](https://github.com/puckeditor/puck/commit/d2c2761ed2c32a19eb8f28f89efa5b0b65802536))

### Bug Fixes

* capture first change in inline richtext field ([208b221](https://github.com/puckeditor/puck/commit/208b22140c0fcf85447ef9da2e838872aced0a77))
* don't lazy load the rich text render on every re-render ([497aedf](https://github.com/puckeditor/puck/commit/497aedfec5a0cd362ad9f19f2c03904d787c83ef))
* show overlay portal outline only in edit mode ([31c3d21](https://github.com/puckeditor/puck/commit/31c3d217a3c4ad36bf77d8889c56ac9a538e36c1))
* use aria-expanded for accessible name in component category buttons ([f949417](https://github.com/puckeditor/puck/commit/f9494176c8c936faec6fc6d5ecbf7d5c5dce33fa))