Chris Villa's Avatar

Chris Villa

@chrisvilla.bsky.social

Building @puckeditor.com and @measured.co

75 Followers  |  94 Following  |  77 Posts  |  Joined: 18.07.2023  |  2.0109

Latest posts by chrisvilla.bsky.social on Bluesky

Video thumbnail

probably the coolest bit of tech I've ever built

11.11.2025 12:16 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
Release v0.19.3 ยท puckeditor/puck Bug Fixes don't duplicate content in Render when using multiple root DropZones (412cc57)

0.19.3 release from this morning
github.com/puckeditor/p...

15.07.2025 10:01 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Over the last week, we've published 2 bug fix releases for Puck. One of them was released within 6 hours of a critical bug being reported this morning.

Open source is a lot of work, so we're hoping that making things bite-sized reduced some of the cognitive load ๐Ÿง 

15.07.2025 10:01 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

Managing open source releases is hard, but we're working on improving it by reducing the size of each releases

Smaller releases mean:

1. Improved stability as bug are fixed more quickly
2.Rapid improvements as features are released in smaller chunks
3. Contributions merged more quickly

15.07.2025 10:01 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Video thumbnail

what if you could infinitely extend your page builder for the perfect experience?

sneak peak of Puck's dedicated new plugin ui ๐Ÿ‘€

10.07.2025 11:54 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
UI overrides | Puck The overrides API is highly experimental and is likely to experience breaking changes.

Here's the overrides documentation: puckeditor.com/docs/extendi...

01.07.2025 12:04 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

This is a basic example, but you can pretty much override the entire app! And because Puck also exposes its internal applications state, you can completely customise it to your needs.

01.07.2025 12:04 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Video thumbnail

Overrides are probably one of Puck's most powerful features, letting you add custom UI to the Puck interface โšก๏ธ

Say you have a long list of components and need to filter them. Puck doesn't come with search, but it's easy to add one using the "components" override.

01.07.2025 12:04 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Post image

๐Ÿ” 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...

26.06.2025 11:21 โ€” ๐Ÿ‘ 1    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Post image

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

25.06.2025 11:09 โ€” ๐Ÿ‘ 2    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Video thumbnail

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

24.06.2025 17:41 โ€” ๐Ÿ‘ 2    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
<ActionBar> | Puck

Docs: puckeditor.com/docs/api-ref...

19.06.2025 14:26 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Post image Post image

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.

19.06.2025 14:26 โ€” ๐Ÿ‘ 1    ๐Ÿ” 1    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Preview
useGetPuck | Puck

API reference: puckeditor.com/docs/api-ref...

18.06.2025 16:41 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Post image

One of my favourite new features in Puck 0.19 is the useGetPuck hook.

It lets you access the internal Puck API without triggering a re-render. Great for performance!

18.06.2025 16:40 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Video thumbnail

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

18.06.2025 11:19 โ€” ๐Ÿ‘ 1    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube. - YouTube

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

12.06.2025 08:01 โ€” ๐Ÿ‘ 2    ๐Ÿ” 2    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Mind blown by the 10x performance improvement in Puck 0.19. I knew it would be good, but this far exceeds my expectation!

05.06.2025 12:11 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Video thumbnail

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

05.06.2025 12:06 โ€” ๐Ÿ‘ 4    ๐Ÿ” 3    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 1
Post image

Back in Sept 2023, I announced Puck on Hacker News and went from 6 to 1.7k stars in 24 hours.

Now approaching 7k, I'm on a mission to hit 10k!

I canโ€™t do this alone. If you love Puck please:

Upvote on HN: news.ycombinator.com/item?id=4411...
Star the repo: github.com/puckeditor/p...

Thank you! ๐Ÿ™

28.05.2025 14:38 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

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! โญ๏ธ

28.05.2025 13:20 โ€” ๐Ÿ‘ 2    ๐Ÿ” 2    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Post image

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!

19.03.2025 13:20 โ€” ๐Ÿ‘ 3    ๐Ÿ” 2    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Post image

Hereโ€™s mine

23.01.2025 19:34 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Preview
a man in a suit and tie is smiling while standing in an office . ALT: a man in a suit and tie is smiling while standing in an office .
23.01.2025 19:34 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Preview
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...

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

23.01.2025 13:47 โ€” ๐Ÿ‘ 3    ๐Ÿ” 2    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

It's finally here ๐Ÿš€ This is a game changer for page builders, allowing you to create design-in-browser experiences directly within your React application.

22.01.2025 12:30 โ€” ๐Ÿ‘ 3    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
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...

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

21.01.2025 12:39 โ€” ๐Ÿ‘ 8    ๐Ÿ” 4    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Video thumbnail

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. ๐Ÿš€

16.01.2025 12:00 โ€” ๐Ÿ‘ 4    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 1
YouTube Share your videos with friends, family, and the world

@adactio.comโ€™s first talk in over a year tonight! ๐ŸŽ‰

Hereโ€™s the livestream: www.youtube.com/live/XONerj4...

09.01.2025 19:36 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Sometimes the native solutions are the most powerful ones. A great little guide that covers using CSS properties to implement theming in Puck ๐ŸŒˆ

09.01.2025 13:15 โ€” ๐Ÿ‘ 2    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

@chrisvilla is following 20 prominent accounts