Puck: the Open-Source Visual React Editor for Modern Content Workflows

Earlier this week, Measured launched Puck: the open-source visual editor for React designed to bridge the gap between developers and content teams.

The launch went better than we could have imagined — we hit the Hacker News front page and went from 8 to 1,800 stars on GitHub in 24 hours. We receive an overwhelmingly positive response from the community, with heavyweights like Simon Willison (co-creator of Django) and Guillermo Rauch (creator of Next.js and CEO of Vercel) both lending their support.

Puck is born out of a problem space that exists somewhere between a headless CMS and a traditional CMS. We’ve often worked in this space over the years and have seen clients wrestle with the fact that neither approach solves all their problems

This post gives some context into our motivations for building Puck.

The headless CMS problem

To keep websites on-brand, retain greater control over UI, and account for modern front-end development approaches, many companies have moved away from traditional CMS solutions and their WYSIWYG editors. Instead, they’ve opted for headless CMS solutions: creating reusable pieces of content that developers can pull into their application via an API.

The headless CMS pattern has solved numerous brand and website quality issues caused by WYSIWYG editors, like off-brand UI or broken behaviour. However, WYSIWYG editors also provided visual feedback to the content author, the value of which to content teams cannot be overstated. This instant visual feedback is something that headless CMS solutions don’t offer.

Headless CMS solutions optimise for brand consistency over convenience. Content creation is now often significantly slower because content teams have to rely on developers to make even simple layout changes.

This problem is particularly acute in large organisations that manage vast quantities of webpages (some of our clients have pages in the 10,000s). But it also affects smaller organisations where fast iteration cycles are essential to survival.

Enterprise-grade solutions: increasing dependencies

Some enterprise-grade CMS solutions (such as Adobe Experience Manager and Bloomreach) have attempted to reconcile these two very different approaches to content management. But often, they end up creating a new issue:

Most are built on Java. This means that any solutions immediately create a knowledge gap between the front-end developers managing the UI and the Java developers managing the CMS. For instance, if a front-end developer wants to expose a new property on a React component to the content team, they’ll likely have to open a ticket with the Java CMS team.

A process that would involve one team (content) using a WYSIWYG editor now involves three — making the process significantly less efficient.

Enter Puck, a React-first solution

Puck is an open source visual editor for React built by Measured for developers and content teams for rapid, on-brand content delivery. Puck is:

• A robust drag-and-drop editor that works on top of your existing React component library
• Extensible so you can load your content from a 3rd party headless CMS
• Self-hosted and open-source under MIT to avoid vendor lock-in
• A portable JSON data model that’s easy to move to new systems

Our goal is to create a best-of-both-worlds solution for our clients, putting the ease of WYSIWYG back into the content process without breaking the brand, whilst still allowing them to reuse content across their pages — balancing the needs of developers, content authors and brand stakeholders.

How it works

Front-end developers can add Puck to an existing React application (it pairs beautifully with Next.js), integrate their existing components, and control which properties they want to expose to content authors.

Content authors can then use Puck to visually create and edit pages without worrying about breaking brand guidelines — dragging and dropping on-brand components without being dependent on development teams for layout changes. This drastically reduces the time it takes to publish content.

Puck can be used as a standalone CMS or it can pull in data from your existing content repository.

Avoiding vendor lock-in

We built Puck specifically to avoid vendor lock-in:

• It’s open source under MIT
• You can embed it in your own application
• You own your data
• The data is stored in a straight-forward JSON format

Extensibility

Puck can be made even more powerful with adaptors and plugins.

Adaptors allow you to pull data from any data source, such as an existing headless CMS.

Plugins enhance Puck’s underlying functionality and user interface. We currently have one plugin: heading-analyzer, which creates a document outline for the current page and warns you if the structure is not following WCAG 2.1 accessibility guidelines.

We’re excited to see what else the Puck community can create!

Try Puck for yourself

If you’re interested in trying out Puck for yourself, check out the live demo, or the code on GitHub.

If you're an engineer looking for a guide to setting up Puck, check out our technical walkthrough.