prevwong/craft.js
Craft.js
Craft.js is a framework for building extensible drag-and-drop page editors using React components and serializable state management. It provides the core infrastructure to construct custom page builders where users can compose layouts by dragging, dropping, and repositioning elements within a structured editor environment.
The framework manages editor state through a component-based node tree, where each user element is represented as an internal node storing its type, props, and parent relationships. This state is managed via React Context and can be serialized to JSON for persistence and sharing of page designs. The editor supports custom rendering overrides, allowing developers to replace default element rendering with their own React components, and provides a drag-and-drop event system with configurable drop indicator styling.
Developers can define user components as reusable building blocks, mark elements as droppable regions that accept child components, and create component toolboxes that serve as palettes of draggable items. The framework supports inline property editing through content-editable interfaces or dedicated settings panels, layer tree management with customizable rendering and expansion controls, and the ability to inspect and manipulate editor state programmatically. Custom editing interfaces can be defined for components, enabling interactive editing experiences like modals for updating props.