Craft.js — React Framework for Extensible Drag-and-Drop Page Editors

Introduction

Craft.js is a React framework for building page editors. Unlike opinionated page builders, Craft.js provides the infrastructure for drag-and-drop, node management, and serialization while you supply the actual React components and editor UI. This gives developers complete control over the look, feel, and behavior of the editor.

What Craft.js Does

• Provides a React-based node tree that powers drag-and-drop editing on a canvas
• Lets you use your own React components as the building blocks on the canvas
• Serializes the editor state to JSON for saving and restoring designs
• Exposes hooks and connectors for building custom toolbars, sidebars, and settings panels
• Supports nested containers, component constraints, and rendering rules

Architecture Overview

Craft.js maintains an internal node tree that represents the editor state. Each node maps to a React component registered in the resolver. The Editor context provides hooks like useNode and useEditor that give components access to their own node data, selection state, and mutation methods. Drag-and-drop is handled via connectors that you attach to your component DOM elements. The entire state can be serialized to JSON and deserialized to restore a design.

Self-Hosting & Configuration

• Install @craftjs/core and import the Editor, Frame, and Element components
• Create user components with a static craft property defining default props, rules, and related settings
• Wrap your application in the Editor provider with a resolver mapping component names to implementations
• Use useEditor().actions.serialize() to export the current design as JSON
• Load saved designs by passing serialized JSON to the Frame component

Key Features

• Component-first: every element on the canvas is a real React component with full interactivity
• Headless UI: bring your own toolbar, sidebar, and settings panel — Craft.js handles state and drag-drop
• Serialization: the entire editor state round-trips through JSON for persistence and collaboration
• Rules engine: define which components can be dragged where and set constraints per component
• Hooks API: useNode() and useEditor() hooks give fine-grained access to editor internals

Comparison with Similar Tools

• GrapesJS — framework-agnostic HTML editor; Craft.js is React-specific and uses real React components
• Puck — React visual editor with server components; Craft.js is lower-level and more customizable
• Builder.io SDK — renders content from a visual editor service; Craft.js is a standalone editor framework
• react-grid-layout — grid-based layout system; Craft.js is a full page editor with nested components
• Plate (editor) — rich text editor framework; Craft.js is for page layout editing, not document editing

FAQ

Q: Can I use Craft.js with Next.js? A: Yes. Craft.js works in any React environment including Next.js. For server-side rendering, you render the serialized design on the server and hydrate on the client.

Q: How do I persist editor designs? A: Call useEditor().actions.serialize() to get a JSON string. Store it in your database. Load it back by passing the JSON to the Frame component via the data prop.

Q: Is Craft.js a no-code builder? A: Craft.js is a framework for building no-code or low-code editors. You write code to define the components and editor UI; end users interact with the drag-and-drop interface you create.

Q: Can end users add custom styles? A: You control what editing capabilities are exposed. You can build style panels using useNode() that let users change colors, spacing, typography, or any other prop on your components.

Sources

• https://github.com/prevwong/craft.js
• https://craft.js.org/docs/overview