craft.js

Introducing Craft.js

Craft.js is an innovative solution for those looking to build customizable page editors without the complexities that usually accompany such ambitious projects. With Craft.js, developers can craft personalized editors that fit specific design and functionality needs by leveraging its modular framework.

What is Craft.js?

Creating a high-quality page editor is a challenging endeavor, as pre-existing libraries, while useful, often demand significant effort for customization. Craft.js addresses this issue by providing a flexible structure that simplifies the creation process. It empowers developers with a drag-and-drop system that governs the rendering, updating, and movement of user components, allowing them to design page editors according to their unique specifications.

Key Features

Built on React

Craft.js is designed with React at its core, eliminating the need for complex plugins. Developers can create editors just as they would any other React-based application, ensuring smooth integration and efficient UI development. The entire editor, from top to bottom, is constructed using React components, providing familiarity and ease of use.

import React from "react";
import { Editor, Frame, Element } from "@craftjs/core";
const App = () => {
  return (
    <div>
      <header>Some fancy header or whatever</header>
      <Editor>
        <Frame resolver={{ TextComponent, Container }}>
          <Element canvas is={TextComponent} text="I'm already rendered here" />
        </Frame>
      </Editor>
    </div>
  );
};

Component Control

Craft.js offers full control over how components are edited. Developers dictate the editing process, as demonstrated by a feature allowing users to update text via a modal. This example illustrates how the input changes directly update the component's properties:

import { useNode } from "@craftjs/core";

const TextComponent = ({ text }) => {
  const {
    connectors: { connect, drag },
    isClicked,
    actions: { setProp },
  } = useNode((state) => ({
    isClicked: state.events.selected,
  }));

  return (
    <div ref={(dom) => connect(drag(dom))}>
      <h2>{text}</h2>
      {isClicked ? (
        <Modal>
          <input
            type="text"
            value={text}
            onChange={(e) => setProp(e.target.value)}
          />
        </Modal>
      ) : null}
    </div>
  );
};

Droppable Regions

Creating components like containers that accept other components within them is straightforward with Craft.js. By using the <Canvas />, developers can establish sections where users can drag and drop components effortlessly.

import { useNode } from "@craftjs/core";
const Container = () => {
  const { connectors: { drag } } = useNode();

  return (
    <div ref={drag}>
      <Canvas id="drop_section">
        <TextComponent />
      </Canvas>
    </div>
  )
}

Extensibility and Serialization

Craft.js's API facilitates reading and manipulating the editor's state, making features like component duplication simple:

import { useEditor, useNode } from "@craftjs/core";
const Container = () => {
  const { actions: { add }, query: { createNode, node } } = useEditor();
  const { id, connectors: { drag, connect } } = useNode();
  return (
    <div ref={dom => connect(drag(dom))}>
      ...
      <a onClick={() => {
        const { data: { type, props } } = node(id).get();
        add(
          createNode(React.createElement(type, props));
        );
      }}>
        Make a copy of me
      </a>
    </div>
  )
}

Moreover, the editor's state can be serialized into JSON for efficient storage and reconstruction.

const SaveButton = () => {
  const { query } = useEditor();
  return <a onClick={() => console.log(query.serialize()) }>Get JSON</a>
}

Target Audience

Craft.js is ideally suited for developers who want:

• Complete control over their page editor's design and functionality.
• To work within the React ecosystem, benefiting from the expansive community and available components.
• Custom page editor solutions that cater to unique organizational needs.

Conversely, individuals needing an off-the-shelf editor should look elsewhere, as Craft.js serves as a foundation for custom editors rather than a pre-made solution.

Additional Offerings

An additional package, @craftjs/layers, is available for those interested in a layers panel reminiscent of Photoshop.

Community and Support

Craft.js embraces community engagement and encourages contributions and discussions through its Discord server.

Sponsorship and Support

Craft.js is open-source under the MIT license, crafted with dedication for the development community. Support its ongoing progress via donations or sponsorship through platforms like Github Sponsor, Open Collective, or Ko-fi.

Craft.js is an impactful tool for developers seeking to implement custom page editing solutions with ease, flexibility, and a high degree of control over every aspect of their design.