Puck 0.18: New drag-and-drop engine
Puck is the open-source visual editor for React, empowering the next generation of page builders and no-code products. Give us a star on GitHub! ⭐️ Puck 0.18 launches a groundbreaking new drag-and-drop engine for page building with advanced CSS layouts. With native support for CSS grid and flexbox, Puck 0.18 enables powerful new paradigms for creating design-in-browser experiences directly within your React application. TLDR New drag-and-drop engine: Multi-dimensional drag-and-drop across any CSS layout to create a sophisticated page building experience. Read the docs. Dynamic DropZone height: DropZones now shrink to the height of their children, with a configurable height when empty. Toggle interactive hotkey: Make your components interactive in Preview mode with the cmd+i hotkey. Parent selector: A new action allows you to quickly select the component's parent directly from the action bar. No more position: fixed: We've removed this pesky style from the default layout so it's easier to embed in your app. New ActionBar.Label component: Create sections in your action bar with the new component. Highlights New drag-and-drop engine Our flagship feature is a new drag-and-drop engine for Puck with full CSS grid & flexbox support to enable advanced layouts. We call these fluid layouts, and they are fully backwards compatible. Thanks to @clauderic at dnd-kit for all the support in making this possible, and the Puck community for all the feedback!
Puck is the open-source visual editor for React, empowering the next generation of page builders and no-code products. Give us a star on GitHub! ⭐️
Puck 0.18 launches a groundbreaking new drag-and-drop engine for page building with advanced CSS layouts.
With native support for CSS grid and flexbox, Puck 0.18 enables powerful new paradigms for creating design-in-browser experiences directly within your React application.
TLDR
- New drag-and-drop engine: Multi-dimensional drag-and-drop across any CSS layout to create a sophisticated page building experience. Read the docs.
- Dynamic DropZone height: DropZones now shrink to the height of their children, with a configurable height when empty.
-
Toggle interactive hotkey: Make your components interactive in Preview mode with the
cmd+ihotkey. - Parent selector: A new action allows you to quickly select the component's parent directly from the action bar.
-
No more
position: fixed: We've removed this pesky style from the default layout so it's easier to embed in your app. - New ActionBar.Label component: Create sections in your action bar with the new component.
Highlights
New drag-and-drop engine
Our flagship feature is a new drag-and-drop engine for Puck with full CSS grid & flexbox support to enable advanced layouts. We call these fluid layouts, and they are fully backwards compatible.
Thanks to @clauderic at dnd-kit for all the support in making this possible, and the Puck community for all the feedback!
What's Your Reaction?
