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.
Features
- Drag-and-Drop Page Builders - A framework for building custom drag-and-drop page editors with extensible React components and serializable state.
- Drag and Drop - Provides the core drag-and-drop event system for repositioning components within a page editor.
- Editor - Exports and imports the full editor layout as JSON for persistence or sharing of page designs.
- JSON Export and Restore - Exports and imports the full editor layout as JSON for persistence and sharing of page designs.
- Component Toolboxes - Provides a palette of draggable items that create new component instances when dropped into the editor.
- Reactive Design JSON States - Exports and imports the full editor layout as JSON for persistence and sharing of page designs.
- Drag-and-Drop Page Editors - A framework for building extensible drag-and-drop page editors with React components and serializable state management.
- Droppable Zone Definitions - Marks elements as containers that accept child elements, making those children draggable within the editor.
- Draggable Layout Elements - Enables elements to be placed as children of droppable regions and repositioned via drag-and-drop.
- Draggable Component Definitions - Creates reusable building blocks that end users can drag, drop, and edit within the page editor.
- Editor Node Trees - Provides the internal node tree that represents every user element in the page editor.
- Internal Node Representations - Represents each user element as an internal node storing type, props, and parent relationships for state management.
- Rendering Overrides - Allows replacing default rendering of user elements with custom React components for flexible UI control.
- React State Bindings - Manages editor state through React Context, enabling components to read and manipulate the page composition tree.
- Programmatic State Inspectors - Provides APIs to inspect and manipulate the editor's internal node tree for features like copying components.
- Draggable Component Palettes - Provides a component toolbox that serves as a palette of draggable items for building page layouts.
- Editor State APIs - Provides APIs to read the current editor state including all nodes, events, and selected elements.
- Custom Editing Interfaces - Allows defining custom editing interfaces for components, enabling interactive editing like modals for updating props.
- Component Layer Trees - Manages and customizes the display of nested component layers in the editor interface with expansion controls.
- Property Editing Panels - Supports modifying component props directly through content-editable interfaces or dedicated settings panels.
- Layer Tree Expanders - Ships a layer tree with configurable default expansion of root nodes for managing nested components.
- Component Editing Interfaces - Defines custom editing interfaces for components enabling interactive editing like content-editable text.
