Craft.js
React framework for building extensible drag-and-drop page editors. Headless, framework-based approach with full plugin support.
Open source alternative to:


Craft.js is a React framework for building extensible drag-and-drop page editors. Rather than shipping a turnkey editor, Craft.js provides the underlying primitives — a node tree, a drag-and-drop engine, and a plugin system — so you can assemble the exact editor your team needs.
Craft.js is MIT-licensed and built in TypeScript. It is headless, ships without a default UI, and gives developers full control over rendering, theming, and the editing experience. The framework is highly extensible: custom drag handles, resizable nodes, custom rules, serializer hooks, and per-component editor controls are all first-class. It works with any React setup and integrates cleanly with Next.js, Remix, and standalone React apps.
Craft.js is a good fit for teams building custom content editors, internal tooling, marketing page builders, or specialized CMS interfaces — anywhere a generic page builder is too rigid and a custom implementation is too expensive. It has a large community, thousands of stars on GitHub, and a permissive license suitable for commercial use.
Frequently Asked Questions
Can I save and restore the editor state in Craft.js?
Yes. Craft.js exposes a serialize() method that outputs the entire editor state as JSON, which you can compress and store however you like. Pass that JSON string back to the Frame component to recreate the same page and continue editing it. The README shows this full round-trip.
How do I make custom components draggable and editable?
Components are plain React components that use the useNode hook, which provides connectors for drag-and-drop and an actions API to update props on selection. Wrap a droppable region in a Canvas element so users can drop other components into it, and use the built-in support for custom drag handles and resizable nodes.
Does Craft.js export HTML or code that I can ship directly?
No. Craft.js models the page as a JSON-serializable node tree rather than generating static HTML or JSX. You store the serialized JSON and re-render it at runtime with a Frame component, which resolves your components through a resolver map.
Does Craft.js provide any ready-made UI or components?
The core is headless and ships without a default interface, so you build the editor UI yourself in React. The project offers example editors you can use as starting points plus an official @craftjs/layers package that adds a Photoshop-style layers panel.
Can I use Craft.js with Next.js or Remix?
Yes. Craft.js is just React, so it works with any React setup, including Next.js, Remix, and standalone React apps. A basic tutorial in the docs walks through building a full editor from scratch.
OpenAltFinder Score
Project Details
Repository details
Updated 10/25/2026, 9:01:01 AM
View RepositoryRepository activity
Sponsor Craft.js
Get the latest open source alternatives delivered weekly.
Discover tools that give you freedom from proprietary software.
Compare Craft.js with
Similar open source alternatives

FlatPress
FlatPress is a lightweight, easy-to-set-up flat-file blogging engine.
WordPress
Ghost
Ghost is an independent open-source publishing platform for modern creators. Run blogs, newsletters, memberships, and paid subscriptions all in one beautifully designed place.
WordPress
Payload
Open-source, TypeScript-first headless CMS and app framework that runs natively in Next.js with a code-defined backend and admin UI.
Contentful
Haven
Self-hostable private blogging
WordPress
Concrete CMS
Self-hosted PHP CMS with in-context page editing, drag-and-drop blocks, granular permissions and a marketplace of themes and add-ons. MIT licensed.

Frappe Builder
Open-source visual website builder with a Figma-like canvas, built-in Frappe CMS, one-click publishing and an AI page agent.
Webflow



