Revolutionizing Drag-and-Drop in React: Introducing Puck 8

Puck 0.18: The Next-Generation React Visual Editor is Here!

Get ready for a massive upgrade! Puck, the open-source visual editor for React, just launched version 0.18, featuring a revolutionary drag-and-drop engine with full CSS Grid and Flexbox support. This unlocks unprecedented design flexibility for your page builders and no-code applications.

Give Puck a star on GitHub! ⭐

This update eliminates previous limitations, allowing users to drag and drop any component anywhere on the canvas. Imagine the possibilities:

Now, your users can create virtually any design imaginable—all without writing code. No more compromises; pure creative freedom awaits!

Puck 0.18 isn't just an improvement; it's a transformation into the ultimate design-in-browser tool. Its adaptability scales to your specific needs, from simple page-level blocks to highly granular visual layout builders for atomic components. Build websites, document editors, infographic designers—if it's built with React components, Puck can handle it.

Let's explore the key features:

(For detailed information, see the official release notes and changelog.)

Updating to Puck 0.18

Updating is easy! For new projects:

<code class="language-bash">npm install @measured/puck --save</code>

For existing projects:

<code class="language-bash">npm update @measured/puck</code>

No breaking changes mean a smooth transition! ?

Free-Form Drag and Drop

The new drag-and-drop engine is a game-changer. Previous versions had limitations, primarily restricting drag-and-drop to the vertical axis. While the DropZoneAPI allowed for multi-column layouts, manual component positioning was cumbersome.

Now, freely drag and drop components in any direction. Puck provides instant visual feedback:

Setting this up is simple. Style your wrapper DropZone as a grid or flexbox in your Puck config:

<code class="language-javascript">  Grid: {
    //... fields configuration
    render: ({ columns }) => (
     <dropzone zone="my-grid"><p>This transforms the DropZone's div into a CSS grid, ensuring automatic alignment.  The same applies to flex containers.</p>

<h3>Advanced CSS Layouts</h3>

Previously, all Puck components were wrapped in a div, hindering direct descendant treatment within CSS grid or flex layouts.  The new `inline` parameter removes this wrapper, enabling expected behavior for rules like `flex-grow` or `grid-column`.

For example, create a customizable card grid using `grid-column` and `grid-row`:

```javascript
Card: {
  //... fields configuration
  inline: true, // Remove default wrapper
  render: ({ spanRow, spanCol, puck }) => {
    return (
      <div>
      </div>
    );
  },
};</code>

Users can build sophisticated layouts by adjusting editor fields:

This also works with flex containers, creating responsive layouts:

This empowers more ambitious layouts and interactive experiences.

Dragging Between DropZones

Drag components between any DropZone containers! Previously, dragging was limited to zones sharing the same parent. Now, move components seamlessly between siblings, nested children, or parents—no extra setup needed.

(Use the allow prop on DropZone for component restrictions.)

Dynamic DropZone Height

DropZones now dynamically adjust their height to match their children, providing accurate render previews. Configure a placeholder height (minEmptyHeight) for empty DropZones to maintain consistent layouts.

<code class="language-bash">npm install @measured/puck --save</code>

Extending Component Drawers with Grids

The component Drawer (sidebar) can now be displayed as a grid, thanks to the new drag-and-drop engine.

More in 0.18!

• Interactive hotkey (cmd/ctrl i) to toggle component interactivity.
• "Select parent" action in the action bar.
• Removed position: fixed from the default layout for easier app embedding.
• New <ActionBar.Label> component for action bar organization.

Explore the updated documentation for a deeper dive!

Closing Thoughts

Puck 0.18 is a community effort. Thank you for your feedback and contributions! Share your creations and connect with us on Discord, Bluesky, and X. And don't forget to give us a ? on GitHub! Let's see what you build next! ?

The above is the detailed content of Revolutionizing Drag-and-Drop in React: Introducing Puck 8. For more information, please follow other related articles on the PHP Chinese website!