Puck
@puckeditor.com
Reposted by Puck
🔍 Easily overlooked feature in Puck 0.19: the new `trigger` parameter to resolveData that provides context about why it was called.
This enables you to customise the behaviour of resolveData based on the context, like avoiding expensive async calls.
Neat!
Docs: puckeditor.com/docs/api-ref...
This enables you to customise the behaviour of resolveData based on the context, like avoiding expensive async calls.
Neat!
Docs: puckeditor.com/docs/api-ref...
June 26, 2025 at 11:21 AM
🔍 Easily overlooked feature in Puck 0.19: the new `trigger` parameter to resolveData that provides context about why it was called.
This enables you to customise the behaviour of resolveData based on the context, like avoiding expensive async calls.
Neat!
Docs: puckeditor.com/docs/api-ref...
This enables you to customise the behaviour of resolveData based on the context, like avoiding expensive async calls.
Neat!
Docs: puckeditor.com/docs/api-ref...
Reposted by Puck
If you're implementing RBAC, then Puck's permissions API can help you lock things down! 🔒
For example, specifying `delete: false` will prevent the user from deleting components.
You can do this globally, per-component, or dynamically based on current props.
Docs: puckeditor.com/docs/integra...
For example, specifying `delete: false` will prevent the user from deleting components.
You can do this globally, per-component, or dynamically based on current props.
Docs: puckeditor.com/docs/integra...
June 25, 2025 at 11:09 AM
If you're implementing RBAC, then Puck's permissions API can help you lock things down! 🔒
For example, specifying `delete: false` will prevent the user from deleting components.
You can do this globally, per-component, or dynamically based on current props.
Docs: puckeditor.com/docs/integra...
For example, specifying `delete: false` will prevent the user from deleting components.
You can do this globally, per-component, or dynamically based on current props.
Docs: puckeditor.com/docs/integra...
Reposted by Puck
Puck's new slots API is mind-blowingly powerful 🤯
The demo "template" component combines:
- a slot field for the content
- a custom field to select/save the slot data
- the resolveData API to load the slot data
Slot docs: puckeditor.com/docs/api-ref...
The demo "template" component combines:
- a slot field for the content
- a custom field to select/save the slot data
- the resolveData API to load the slot data
Slot docs: puckeditor.com/docs/api-ref...
June 24, 2025 at 5:42 PM
Puck's new slots API is mind-blowingly powerful 🤯
The demo "template" component combines:
- a slot field for the content
- a custom field to select/save the slot data
- the resolveData API to load the slot data
Slot docs: puckeditor.com/docs/api-ref...
The demo "template" component combines:
- a slot field for the content
- a custom field to select/save the slot data
- the resolveData API to load the slot data
Slot docs: puckeditor.com/docs/api-ref...
Reposted by Puck
If you need to customise action bar in Puck, you can use the `actionBar` override!
Combine this with the <ActionBar> component to extend the interface with custom actions and other behaviours.
Combine this with the <ActionBar> component to extend the interface with custom actions and other behaviours.
June 19, 2025 at 2:26 PM
If you need to customise action bar in Puck, you can use the `actionBar` override!
Combine this with the <ActionBar> component to extend the interface with custom actions and other behaviours.
Combine this with the <ActionBar> component to extend the interface with custom actions and other behaviours.
Reposted by Puck
Little demo showing Puck changing the fields based on whether the parent uses CSS Grid.
Notice how the grid fields are removed from the layout section when moving the card.
You can achieve this using the "parent" param provided to the resolveFields API.
Docs: puckeditor.com/docs/api-ref...
Notice how the grid fields are removed from the layout section when moving the card.
You can achieve this using the "parent" param provided to the resolveFields API.
Docs: puckeditor.com/docs/api-ref...
June 18, 2025 at 11:19 AM
Little demo showing Puck changing the fields based on whether the parent uses CSS Grid.
Notice how the grid fields are removed from the layout section when moving the card.
You can achieve this using the "parent" param provided to the resolveFields API.
Docs: puckeditor.com/docs/api-ref...
Notice how the grid fields are removed from the layout section when moving the card.
You can achieve this using the "parent" param provided to the resolveFields API.
Docs: puckeditor.com/docs/api-ref...
Puck 0.19 introduces the Slots API — the powerful successor to DropZones that lets you nest components using fields — along with several other new features.
Check out our latest video for a walk-through of the key features 👇
youtu.be/ZXRlB6Uugx8
Check out our latest video for a walk-through of the key features 👇
youtu.be/ZXRlB6Uugx8
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
youtu.be
June 12, 2025 at 8:01 AM
Puck 0.19 introduces the Slots API — the powerful successor to DropZones that lets you nest components using fields — along with several other new features.
Check out our latest video for a walk-through of the key features 👇
youtu.be/ZXRlB6Uugx8
Check out our latest video for a walk-through of the key features 👇
youtu.be/ZXRlB6Uugx8
Puck 0.19 just got released!
What’s new?
🏗️ Nest components using slot fields for programmatic control
💽 Inject metadata into all components without context
⚡ Improved performance, reducing render times by 90%
puckeditor.com/blog/puck-019
What’s new?
🏗️ Nest components using slot fields for programmatic control
💽 Inject metadata into all components without context
⚡ Improved performance, reducing render times by 90%
puckeditor.com/blog/puck-019
June 5, 2025 at 12:06 PM
Puck 0.19 just got released!
What’s new?
🏗️ Nest components using slot fields for programmatic control
💽 Inject metadata into all components without context
⚡ Improved performance, reducing render times by 90%
puckeditor.com/blog/puck-019
What’s new?
🏗️ Nest components using slot fields for programmatic control
💽 Inject metadata into all components without context
⚡ Improved performance, reducing render times by 90%
puckeditor.com/blog/puck-019
Back in Sept 2023, we announced Puck on Hacker News, and went from 6 to 1,700 stars in 24 hours.
Now approaching 7,000, and on a mission to hit 10k!
We can’t do this alone, so please:
Upvote on HN: news.ycombinator.com/item?id=4411...
Star the repo: github.com/puckeditor/p...
Thank you! ⭐️
Now approaching 7,000, and on a mission to hit 10k!
We can’t do this alone, so please:
Upvote on HN: news.ycombinator.com/item?id=4411...
Star the repo: github.com/puckeditor/p...
Thank you! ⭐️
May 28, 2025 at 1:20 PM
Back in Sept 2023, we announced Puck on Hacker News, and went from 6 to 1,700 stars in 24 hours.
Now approaching 7,000, and on a mission to hit 10k!
We can’t do this alone, so please:
Upvote on HN: news.ycombinator.com/item?id=4411...
Star the repo: github.com/puckeditor/p...
Thank you! ⭐️
Now approaching 7,000, and on a mission to hit 10k!
We can’t do this alone, so please:
Upvote on HN: news.ycombinator.com/item?id=4411...
Star the repo: github.com/puckeditor/p...
Thank you! ⭐️
Tailwind v4 lets you safelist classes using source directives. This makes dynamic styling work at runtime, while still getting minimized CSS bundles.
In our latest tutorial, we show you how to use that to build a page builder from scratch with Puck:
In our latest tutorial, we show you how to use that to build a page builder from scratch with Puck:
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
www.youtube.com
April 10, 2025 at 8:00 AM
Tailwind v4 lets you safelist classes using source directives. This makes dynamic styling work at runtime, while still getting minimized CSS bundles.
In our latest tutorial, we show you how to use that to build a page builder from scratch with Puck:
In our latest tutorial, we show you how to use that to build a page builder from scratch with Puck:
Headless CMSs are great for reusing your content, but tweaking page layouts shouldn’t need a developer.
Here’s how to avoid that by integrating Puck with Contentful for page building 👉 dev.to/puckeditor/i...
Here’s how to avoid that by integrating Puck with Contentful for page building 👉 dev.to/puckeditor/i...
March 20, 2025 at 1:00 PM
Headless CMSs are great for reusing your content, but tweaking page layouts shouldn’t need a developer.
Here’s how to avoid that by integrating Puck with Contentful for page building 👉 dev.to/puckeditor/i...
Here’s how to avoid that by integrating Puck with Contentful for page building 👉 dev.to/puckeditor/i...
Reposted by Puck
Just merged Puck's massive (7,000 line change) Zustand state migration, eliminating almost all unnecessary re-renders.
Selectors also coming soon to `usePuck`, so your own Puck components can remain performant, too!
Selectors also coming soon to `usePuck`, so your own Puck components can remain performant, too!
March 19, 2025 at 1:20 PM
Just merged Puck's massive (7,000 line change) Zustand state migration, eliminating almost all unnecessary re-renders.
Selectors also coming soon to `usePuck`, so your own Puck components can remain performant, too!
Selectors also coming soon to `usePuck`, so your own Puck components can remain performant, too!
At Puck, we needed a flexible, high-performance drag-and-drop engine—so we tested every major DnD library for React.
Some were great. Some were… not.
Here’s a breakdown of the best options and when to use them:
Some were great. Some were… not.
Here’s a breakdown of the best options and when to use them:
Top 5 Drag-and-Drop Libraries for React
Drag-and-drop is one of those features that seems simple until you actually have to build it. Then,...
buff.ly
February 20, 2025 at 3:00 PM
At Puck, we needed a flexible, high-performance drag-and-drop engine—so we tested every major DnD library for React.
Some were great. Some were… not.
Here’s a breakdown of the best options and when to use them:
Some were great. Some were… not.
Here’s a breakdown of the best options and when to use them:
Now that Puck’s new drag-and-drop engine is live, let’s talk about actually using it with CSS Grid & Flexbox.
This post covers patterns to avoid layout shifts, keep things predictable, and make your editor feel great.
Check it out 👇
This post covers patterns to avoid layout shifts, keep things predictable, and make your editor feel great.
Check it out 👇
Advanced Layouts with Puck 0.18: Harnessing Grid and Flex Containers
Puck is the open-source visual editor for React, that you can embed in any application to create the...
buff.ly
February 14, 2025 at 2:53 PM
Now that Puck’s new drag-and-drop engine is live, let’s talk about actually using it with CSS Grid & Flexbox.
This post covers patterns to avoid layout shifts, keep things predictable, and make your editor feel great.
Check it out 👇
This post covers patterns to avoid layout shifts, keep things predictable, and make your editor feel great.
Check it out 👇
Reposted by Puck
Yesterday, Puck 0.18 got released and introduced its revolutionary Drag-and-Drop engine.
Today, I wrote an article where I break down how it improves UX, what it means for you as a developer, and how to start using the new features today: buff.ly/4hp5640
Today, I wrote an article where I break down how it improves UX, what it means for you as a developer, and how to start using the new features today: buff.ly/4hp5640
Revolutionizing Drag-and-Drop in React: Introducing Puck 0.18
Puck is the open-source visual editor for React, that you can embed in any application to create the...
buff.ly
January 23, 2025 at 1:48 PM
Yesterday, Puck 0.18 got released and introduced its revolutionary Drag-and-Drop engine.
Today, I wrote an article where I break down how it improves UX, what it means for you as a developer, and how to start using the new features today: buff.ly/4hp5640
Today, I wrote an article where I break down how it improves UX, what it means for you as a developer, and how to start using the new features today: buff.ly/4hp5640
The wait is over: Puck v0.18 just landed with the new drag-and-drop engine! 🎁
✨ What’s new?
📌 Drag and drop across CSS Grid & Flexbox
📌 Completely remove wrapping elements with the inline API
📌 No more position: fixed—easily embed the editor into your app's layout
✨ What’s new?
📌 Drag and drop across CSS Grid & Flexbox
📌 Completely remove wrapping elements with the inline API
📌 No more position: fixed—easily embed the editor into your app's layout
January 22, 2025 at 12:26 PM
The wait is over: Puck v0.18 just landed with the new drag-and-drop engine! 🎁
✨ What’s new?
📌 Drag and drop across CSS Grid & Flexbox
📌 Completely remove wrapping elements with the inline API
📌 No more position: fixed—easily embed the editor into your app's layout
✨ What’s new?
📌 Drag and drop across CSS Grid & Flexbox
📌 Completely remove wrapping elements with the inline API
📌 No more position: fixed—easily embed the editor into your app's layout
Reposted by Puck
My interview for the Craft of Open Source podcast is live! 🚀
We talked design systems at scale, origins of @puckeditor.com and how to balance it with running a consultancy @measured.co.
Odd to listen to a podcast of yourself, but very much enjoyed playing it back.
open.spotify.com/show/5fazVpZ...
We talked design systems at scale, origins of @puckeditor.com and how to balance it with running a consultancy @measured.co.
Odd to listen to a podcast of yourself, but very much enjoyed playing it back.
open.spotify.com/show/5fazVpZ...
The Craft Of Open Source
Podcast · Ben Rometsch, CEO, Flagsmith · Welcome to The Craft of Open Source, hosted by Ben Rometsch, Co-Founder and CEO of Flagsmith. This bi-weekly show is focused on the ins and outs of the Open So...
open.spotify.com
January 21, 2025 at 12:40 PM
My interview for the Craft of Open Source podcast is live! 🚀
We talked design systems at scale, origins of @puckeditor.com and how to balance it with running a consultancy @measured.co.
Odd to listen to a podcast of yourself, but very much enjoyed playing it back.
open.spotify.com/show/5fazVpZ...
We talked design systems at scale, origins of @puckeditor.com and how to balance it with running a consultancy @measured.co.
Odd to listen to a podcast of yourself, but very much enjoyed playing it back.
open.spotify.com/show/5fazVpZ...
The wait is OVER.
Next week, Puck's will launch its new drag-and-drop engine:
✔ Drag across CSS Grid & Flexbox, right out of the box
✔ Effortlessly integrate your React components
✔ Seamlessly embedded within your app
Goodbye limits. Hello freedom. 🚀
Next week, Puck's will launch its new drag-and-drop engine:
✔ Drag across CSS Grid & Flexbox, right out of the box
✔ Effortlessly integrate your React components
✔ Seamlessly embedded within your app
Goodbye limits. Hello freedom. 🚀
January 16, 2025 at 12:00 PM
The wait is OVER.
Next week, Puck's will launch its new drag-and-drop engine:
✔ Drag across CSS Grid & Flexbox, right out of the box
✔ Effortlessly integrate your React components
✔ Seamlessly embedded within your app
Goodbye limits. Hello freedom. 🚀
Next week, Puck's will launch its new drag-and-drop engine:
✔ Drag across CSS Grid & Flexbox, right out of the box
✔ Effortlessly integrate your React components
✔ Seamlessly embedded within your app
Goodbye limits. Hello freedom. 🚀
🚀 New guide alert!
Struggling with state management in Puck? 🧩
Learn how to share state and data between components (inside and outside Puck), all while leveraging React Context!
👉 Dive in here: https://buff.ly/42eq80J
#JavaScript #OpenSource #React
Struggling with state management in Puck? 🧩
Learn how to share state and data between components (inside and outside Puck), all while leveraging React Context!
👉 Dive in here: https://buff.ly/42eq80J
#JavaScript #OpenSource #React
Managing application state in Puck
As more people dive into Puck, one question keeps coming up: "How can I pass data or share state between components in Puck?." Since, Puck is just React, there are multiple solutions to this problem.…
dev.to
January 15, 2025 at 12:00 PM
🚀 New guide alert!
Struggling with state management in Puck? 🧩
Learn how to share state and data between components (inside and outside Puck), all while leveraging React Context!
👉 Dive in here: https://buff.ly/42eq80J
#JavaScript #OpenSource #React
Struggling with state management in Puck? 🧩
Learn how to share state and data between components (inside and outside Puck), all while leveraging React Context!
👉 Dive in here: https://buff.ly/42eq80J
#JavaScript #OpenSource #React
Unlock the power of dynamic theming in your page builder! 🎨 Learn how to use CSS variables with Puck to create global themes in React. 🚀
Read more:
Read more:
Using CSS variables to create dynamic themes in Puck
When integrating Puck into your page-building product, a common requirement is to allow your users to centrally manage the theme of the page without having to make adjustments to every component. For…
buff.ly
January 9, 2025 at 1:00 PM
Unlock the power of dynamic theming in your page builder! 🎨 Learn how to use CSS variables with Puck to create global themes in React. 🚀
Read more:
Read more:
Puck 0.17 is out, with React 19 support and numerous quality-of-life improvements for fields!
Thank you to the numerous contributors for this release 🙏
Last release of the year. v0.18 early next year with the new dnd engine 🥳
Happy Holidays!
github.com/measuredco/p...
Thank you to the numerous contributors for this release 🙏
Last release of the year. v0.18 early next year with the new dnd engine 🥳
Happy Holidays!
github.com/measuredco/p...
Release v0.17.0 · measuredco/puck
Puck v0.17.0 adds support for React 19, improves various field APIs and squashes some bugs.
This is our final feature release of the year! We're delaying the new drag-and-drop engine release until ...
github.com
December 18, 2024 at 7:28 PM
Puck 0.17 is out, with React 19 support and numerous quality-of-life improvements for fields!
Thank you to the numerous contributors for this release 🙏
Last release of the year. v0.18 early next year with the new dnd engine 🥳
Happy Holidays!
github.com/measuredco/p...
Thank you to the numerous contributors for this release 🙏
Last release of the year. v0.18 early next year with the new dnd engine 🥳
Happy Holidays!
github.com/measuredco/p...
Reposted by Puck
Wow, what a great early Christmas present! Puck is featured in React Status' Top Repos of the Year! 🎄
react.statuscode.com/issues/411
react.statuscode.com/issues/411
December 18, 2024 at 7:24 PM
Wow, what a great early Christmas present! Puck is featured in React Status' Top Repos of the Year! 🎄
react.statuscode.com/issues/411
react.statuscode.com/issues/411
Reposted by Puck
IT'S ALIVE! Giving Puck's new drag-and-drop engine canary a whirl on the @measured.co site!
November 23, 2024 at 6:36 PM
IT'S ALIVE! Giving Puck's new drag-and-drop engine canary a whirl on the @measured.co site!
Reposted by Puck
Well isn't that virtual lanyard just the cutest 😍
Got my in-person ticket for @nextjs.org conf!
Hit me up if you want to talk @puckeditor.com ✌️
Got my in-person ticket for @nextjs.org conf!
Hit me up if you want to talk @puckeditor.com ✌️
September 19, 2024 at 8:30 PM
Well isn't that virtual lanyard just the cutest 😍
Got my in-person ticket for @nextjs.org conf!
Hit me up if you want to talk @puckeditor.com ✌️
Got my in-person ticket for @nextjs.org conf!
Hit me up if you want to talk @puckeditor.com ✌️
Puck v0.16 just landed!
🔐 Permissions - toggle functionality like deletion, duplication & insertion
📜 History injection - inject history using the `initialHistory` prop
🪛 Add new controls - use the `actionBar` override to insert new controls into the component overlay
github.com/measuredco/p...
🔐 Permissions - toggle functionality like deletion, duplication & insertion
📜 History injection - inject history using the `initialHistory` prop
🪛 Add new controls - use the `actionBar` override to insert new controls into the component overlay
github.com/measuredco/p...
Release v0.16.0 · measuredco/puck
We're celebrating 5,000 stars on GitHub! Thank you to our wonderful community! 🤩
Puck v0.16 is a big release, introducing the headline permissions API and — you guessed it — quality of life improve...
github.com
September 17, 2024 at 12:14 PM
Puck v0.16 just landed!
🔐 Permissions - toggle functionality like deletion, duplication & insertion
📜 History injection - inject history using the `initialHistory` prop
🪛 Add new controls - use the `actionBar` override to insert new controls into the component overlay
github.com/measuredco/p...
🔐 Permissions - toggle functionality like deletion, duplication & insertion
📜 History injection - inject history using the `initialHistory` prop
🪛 Add new controls - use the `actionBar` override to insert new controls into the component overlay
github.com/measuredco/p...