craft.js
\n\n![](\"https://img.shields.io/npm/v/@craftjs/core?color=%232680eb&label=NPM&logo=npm&logoColor=%232680eb&style=for-the-badge\")
\n\n![](\"https://img.shields.io/npm/l/@craftjs/core?color=%23000&style=for-the-badge\")
\n![](\"https://user-images.githubusercontent.com/16416929/72202590-4d05f500-349c-11ea-9e43-1da1cb0c30e9.gif\"/)
\n\n \n Live Demo\n \n
\n\nPage editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.\n\nThere'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.\n\nCraft.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.\n\n## Docs\n- [Core concepts](https://craft.js.org/docs/concepts/nodes)\n- [Tutorial](https://craft.js.org/docs/guides/basic-tutorial)\n- [API Reference](https://craft.js.org/docs/api/editor-state)\n\n## Examples\nThese examples should give you an idea on the flexibility of Craft.js.\n\nBoth these examples look very different from each other, with very different UI. But they are both built with Craft.js! 🤯\n\n- [Landing](https://craft.js.org)\n- [Basic](https://craft.js.org/examples/basic)\n\n\n## Features :fire:\n### It's just React\nNo 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.\n\nA simple user component can easily be defined as such:\n```jsx\nimport { useNode } from \"@craftjs/core\";\n\nconst TextComponent = ({ text }) => {\n const {\n connectors: { connect, drag },\n } = useNode();\n\n return (\n![](\"https://opencollective.com/craftjs/sponsors.svg?width=890\")
\n![](\"https://opencollective.com/craftjs/backers.svg?width=890\")
\n\n### Sponsors\n- [eye-square](https://github.com/eye-square)\n- [api4ui](https://github.com/api4ui)\n\n### Backers\n- [Tekeste Kidanu](https://opencollective.com/guest-1703f486)\n- [CORS Digital](https://opencollective.com/cors-digital)\n- [Mattermix](https://opencollective.com/mattermix)\n- [muttenzer](https://github.com/muttenzer)\n- [ITCuw](https://github.com/ITCuw)\n- [Victor Vanegas](https://github.com/vicvans20)\n- [Andreas Thoelke](https://github.com/andreasthoelke)\n- [Saltcorn](https://github.com/saltcorn)\n","readmeFilename":"README.md"}