Puck editor demo: Edit a page yourself.
This is Puck, the editor behind P1, Pantheon’s new CMS. Drag in a block, change the words, move things around. The page belongs to a nonprofit we made up, and nothing you do leaves this browser.
Getting the editor ready…
What you’re looking at
Blocks on the left.
Each block is one section of a page: a hero, a row of numbers, a set of story cards. Drag one onto the page, or drag the ones already there into a new order.
Fields on the right.
Click a block and its fields open: the words, the links, the photo, a choice of layout. The page changes as you type. Undo is at the top of the editor, or Ctrl+Z (⌘Z on a Mac).
Every screen size.
The buttons above the page switch it between phone, tablet and desktop widths. Preview takes the editor away and shows the page as a visitor would see it.
About accessibility.
The blocks and everything around the editor are built to WCAG 2.2 AA. The editor itself is Puck’s, and parts of it, like dragging a block, are easiest with a mouse or trackpad. If something gets in your way, tell us.
Questions
The editor, explained.
Puck is an open-source visual editor for React, under the MIT License. P1, Pantheon’s new CMS, is built on it, so this is the editing your team would do on a P1 site.
Close. The editor works the same way; the blocks would be yours. On a real project we design them around your content, with the fields your team needs and none it doesn’t.
No. Your changes are kept in this browser’s local storage, on this device, so you can come back to them. Nothing is sent to us or published. Start over, or clearing your browser’s site data, removes them.
The blocks do. Editors fill in fields and pick from set options, like a layout or a heading level, instead of styling things by hand. The design holds whatever goes in, and undo covers the rest.
The preview does. Puck is built for a laptop or desktop, so on a small screen this page shows the preview first, with the editor one button away if you want to try it.
P1 Blocks, our open-source library of ready-made blocks for P1, under the MIT License. The twelve here are a sample; the library has a live editor with all of them at p1-blocks.prolificdigital.io.
Yes. We’re a Pantheon partner and one of P1’s charter partners. We design and build P1 sites and the block systems behind them, then train the people who’ll edit them.
Your blocks, your story.
On a real P1 project we design the blocks around what your team publishes, build them, and train the people who’ll use them.
How we build on P1We’re P1 Charter PartnersBrowse P1 Blocks (opens in a new tab)