craft.js

Craft.js is a React framework for building drag-and-drop page editors, the kind of visual builders where users drag blocks onto a canvas and edit them in place. It is not a ready-made editor that you install and open; instead, it gives you the low-level building blocks to construct your own page editor exactly how you want it to look and behave.

The library handles the parts that are hardest to build from scratch. It manages the drag-and-drop system, tracks which components are on the canvas and their positions, and updates the editor state when components are moved or modified. Your own React components become the draggable elements. You mark a component as draggable by attaching a connector ref from the useNode hook, and you mark a region as a drop zone by wrapping it in a Canvas element.

Each component can control its own editing behavior. For example, when a user clicks on a text element, the component can detect that it is selected and show an input field for editing its content. When the input changes, the component calls setProp to update its own props in the editor state. This pattern gives you full control over the editing UI because you build it yourself using regular React.

The editor state is serializable to JSON, so you can save and restore page layouts from a database. The library also provides an editor-level API for programmatically reading and modifying any component on the canvas, which enables features like copy-paste or bulk actions. Craft.js is MIT licensed and works with any existing React tooling.