iiinova — where your digital self keeps evolving

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 26/06/2025

🔍 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...

011

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 25/06/2025

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...

021

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 24/06/2025

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...

021

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 19/06/2025

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.

111

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 18/06/2025

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...

011

Puck @puckeditor.com · 12/06/2025

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

youtu.be

- YouTube

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

022

Puck @puckeditor.com · 05/06/2025

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

133

Puck @puckeditor.com · 28/05/2025

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! ⭐️

022

Puck @puckeditor.com · 10/04/2025

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:

youtube.com

- YouTube

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

021

Puck @puckeditor.com · 20/03/2025

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...

010

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 19/03/2025

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!

032

Puck @puckeditor.com · 20/02/2025

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:

buff.ly

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,...

020

Puck @puckeditor.com · 14/02/2025

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 👇

buff.ly

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...

020

Reposted by Puck

Fede Bonel Tozzi @fe-bo-to.bsky.social · 23/01/2025

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

buff.ly

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...

032

Puck @puckeditor.com · 22/01/2025

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

141

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 21/01/2025

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...

open.spotify.com

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...

084

Puck @puckeditor.com · 16/01/2025

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. 🚀

041

Puck @puckeditor.com · 18/12/2024

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...

github.com

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 ...

031

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 18/12/2024

Wow, what a great early Christmas present! Puck is featured in React Status' Top Repos of the Year! 🎄 react.statuscode.com/issues/411

021

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 23/11/2024

IT'S ALIVE! Giving Puck's new drag-and-drop engine canary a whirl on the @measured.co site!

041

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 19/09/2024

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 ✌️

021

Puck @puckeditor.com · 17/09/2024

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...

github.com

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...

122

Reposted by Puck

Chris Villa @chrisvilla.bsky.social · 03/09/2024

Fun little debug mode I built as part of @puckeditor.com's new DND engine. Red lines show possible candidates. Green lines show mostly likely candidates. It chooses a candidate based on midpoint and direction. This is an inline CSS grid example. All completely inline - no wrapping elements.

221

Puck @puckeditor.com · 04/06/2024

2024 continues to be a very busy period - Puck v0.15 just landed with a new API for dynamic fields! 🎉 Dynamic fields let you: 1. Show and hide fields 2. Reconfigure fields 3. Populate fields with dynamic data Thank you, as ever, to our lovely community. You are appreciated 🥰

Demo of Puck editor toggling a field called "drink" between "water" and "orange juice". When "water" is selected, another field appears called "waterType" with the options "still" and "sparkling".

131

Reposted by Puck

Measured @measured.co · 09/05/2024

Hello! Just a note to say we’ll be popping along to this year’s State of the Browser. We’d love to see you there. 📌 Saturday, 14 September, 2024 📌 9:30 am–5:00 pm 📌 Barbican Centre, London More about it: measured.co/blog/catch-u...

measured.co

Let’s catch up at this year’s State of the Browser

We’ll be going along to State of the Browser in London in September 2024.

122

Reposted by Puck

Puck @puckeditor.com · 25/04/2024

Puck v0.14 is out now, introducing viewport switching! Highlights - 🌟 4.2k stars on GitHub 🤗 8 new contributor friends 🌶️ Drag-and-drop across iframes 🤝 A new @contentful package Release notes 👇 github.com/measuredco/p...

github.com

Release v0.14.0 · measuredco/puck

Puck v0.14.0 introduces the long awaited viewport switching feature, with drag-and-drop-friendly iframe rendering for full CSS media query support. TLDR Viewport switching: Render your entire Puck...

062

Puck @puckeditor.com · 25/04/2024

github.com

Release v0.14.0 · measuredco/puck

Puck v0.14.0 introduces the long awaited viewport switching feature, with drag-and-drop-friendly iframe rendering for full CSS media query support. TLDR Viewport switching: Render your entire Puck...

062