Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.
There're existing libraries that come with a fully working page editor out of the box with a user interface and editable components. However, if you wish to make customisations such as modifying the user interface and its behavior, it will most definitely involve modifying the library itself.
Craft.js solves this problem by modularising the building blocks of a page editor. It ships with a drag-n-drop system and handles the way user components should be rendered, updated and moved - among other things. With this, you'll be able to build your own page editor exactly how you want it to look and behave.
These examples should give you an idea on the flexibility of Craft.js.
Both these examples look very different from each other, with very different UI. But they are both built with Craft.js! 🤯
No need for complicated plugin systems. Design your editor from top to bottom the same way as you would design any other frontend application in React.
A simple user component can easily be defined as such:
import {useNode} from "@craftjs/core";
const TextComponent = ({text}) => {
const { connectors: {drag} } = useNode();
return (
<div ref={drag}>
<h2>{text}</h2>
</div>
)
}
Heck, the entire UI of your page editor is built using just React.
import React from "react";
import {Editor, Frame, Canvas, Selector} from "@craftjs/core";
const App = () => {
return (
<div>
<header>Some fancy header or whatever</header>
<Editor>
// Editable area starts here
<Frame resolver={TextComponent, Container}>
<Canvas>
<TextComponent text="I'm already rendered here" />
</Canvas>
</Frame>
</Editor>
</div>
)
}
An obvious requirement for page editors is that they need to allow users to edit components. With Craft.js, you control the process of which these components should be edited.
In the following example, when the user clicks on a component, we'll display a modal that requires the user to input a value for the text
prop. As the input value changes, the component will be re-rendered with updated prop.
import {useNode} from "@craftjs/core";
const TextComponent = ({text}) => {
const { connectors: { connect, drag }, isClicked, actions: {setProp} } = useNode(
(state) => ({
isClicked: state.event.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>
)
}
</div>
)
}
With this, you could easily implement content editable text or drag-to-resize components, just as any modern page editor would have.
Let's say we need a "Container" component which users can drop into the editor. Additionally, we would also like them to be able to drag and drop other components into the Container.
In Craft.js, it's as simple as calling the <Canvas />
import {useNode} from "@craftjs/core";
const Container = () => {
const { connectors: {drag} } = useNode();
return (
<div ref={drag}>
<Canvas id="drop_section">
// Now users will be able to drag/drop components into this section
<TextComponent />
</Canvas>
</div>
)
}
Craft.js provides an expressive API which allows you to easily read and manipulate the editor state. Let's say you would like to implement a copy function for a component:
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>
)
}
The editor's state can be serialized into JSON which you can then apply a compression technique of your choice for storage.
const SaveButton = () => {
const { query } = useEditor();
return <a onClick={() => console.log(query.serialize()) }>Get JSON</a>
}
Of course, Craft.js will also able to recreate the entire state from the JSON string.
const App = () => {
const jsonString = /* retrieve JSON from server */
return (
<Editor>
<Frame json={jsonString}>
...
</Frame>
</Editor>
)
}
You should use this if:
You should not use this if:
use-methods
to better fit our API.If you have questions or there's something you'd like to discuss (eg: contributing), please head over to our Discord server.
Craft.js is made with by these wonderful people (emoji key):
Prev Wong 💻 🎨 📖 🤔 💡 |
azreenashah 📖 |
MO 📖 |
Andy Krings-Stern 💻 📖 🤔 |
Shingo Yamazaki 📖 |
Joel Schneider 🐛 📖 |
Evan Rusmisel 📖 |
Michele Riccardo Esposito 💻 🤔 |
Mateusz Drulis 💻 🤔 |
Sigit Prabowo 🐛 |
Srinath Janakiraman 📖 |
Kim 🐛 |
This project follows the all-contributors specification. Contributions of any kind are welcome!
Craft.js is released under the MIT license and is built with 100% love. If you found it useful and would like to ensure its continued development, please consider becoming a backer/sponsor or making a one-time donation via Open Collective or Paypal.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。