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

> A React framework for building drag-and-drop page editors where every element on the canvas is a real React component, giving developers full control over the editing experience.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install @craftjs/core
```

```jsx
import { Editor, Frame, Element } from '@craftjs/core';
import { Text } from './components/Text';

function App() {
  return (
    <Editor resolver={{ Text }}>
      <Frame>
        <Element is="div" canvas>
          <Text text="Hello World" />
        </Element>
      </Frame>
    </Editor>
  );
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-39db1d39
Author: AI Open Source