prevwong/craft.js

★ 8,653TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((craft.js))
    Core Concepts
      Draggable components
      Drop zones
      Editor state
    How It Works
      useNode hook
      useEditor hook
      Connector refs
    Features
      Component editing UI
      JSON serialization
      Extensible API
    Use Cases
      Page builders
      CMS editors
      Form builders

mindmap root((craft.js)) Core Concepts Draggable components Drop zones Editor state How It Works useNode hook useEditor hook Connector refs Features Component editing UI JSON serialization Extensible API Use Cases Page builders CMS editors Form builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a custom website page builder inside a SaaS product where users drag blocks onto a canvas and edit them in place.

USE CASE 2

Create a drag-and-drop email template editor where users rearrange sections and change text without touching code.

USE CASE 3

Add an in-app content editor to a CMS where editors lay out pages visually and save them as JSON.

USE CASE 4

Build a form builder where users drag question blocks onto a canvas, configure each one, and export the form schema.

Tech stack

TypeScriptReact

Getting it running

Difficulty · moderate Time to first run · 1h+

No ready-made editor UI is included, you must build your own editor interface on top of the library.

Use, modify, and distribute freely including in commercial products, as long as you include the MIT license notice.

In plain English

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.

Copy-paste prompts

Prompt 1

I'm building a page editor with craft.js and want a Text component that shows an inline text input when clicked. Show me how to implement the useNode hook and the editing UI.

Prompt 2

How do I serialize the craft.js editor state to JSON and save it to a database, then restore the layout when the user reopens the page?

Prompt 3

I want a Container component in craft.js that lets users drop other components inside it. How do I set up the nested Canvas element?

Prompt 4

I need copy-paste for components in my craft.js editor. How do I use the useEditor hook to read a selected node and duplicate it on the canvas?

Open on GitHub → Explain another repo

← prevwong on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.