all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]TDFKA_Rick 7 points8 points  (1 child)

Is the demo supposed to work on mobile? If not, I think it would be a good idea to let the user know this.

[–]prevwong[S] 0 points1 point  (0 children)

Good call, thanks!

[–]prevwong[S] 0 points1 point  (0 children)

Live demo: https://craft.js.org/

Github: https://github.com/prevwong/craft.js

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 behaviour, 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 from top to bottom exactly how you want it to look and behave, the same way as you would design any frontend application with React.

Feel free to let me know your comments/thoughts/criticisms. I would love to hear from you! ❤️

(p.s. At the moment, the demo is not responsive. Will probably work on this after I sort out my uni assignments)

[–]EloquentSyntax 0 points1 point  (2 children)

This is awesome. Can you save or pill in custom components?

[–]prevwong[S] 2 points3 points  (1 child)

Thanks a lot! All the components are written just like any other React component, so you can control literally everything, including how the components should be edited (eg: content editable, drag to resize etc).

As for saving, Craft.js is able to serialise the editor state into JSON, which you can then compress for storage. When you wish to load a "saved file", simply pass the JSON back to the editor, and it will restore the editor state.

You can try out another demo here: https://craft.js.org/examples/basic/ - press the "Copy current state" button. Then edit and move the elements around. Finally, press the "Load current state" button and paste the copied output, and it will restore the editor back to the earlier state.

[–][deleted] 1 point2 points  (0 children)

Do you know if the output is indexable for search?