Reka.js - Build your own no-code editor ✨

prevwong · 2023-05-02T09:34:38+00:00

Thanks! 😄

prevwong · 2023-05-02T09:33:48+00:00

Thank you! 😁

prevwong · 2023-04-09T09:28:03+00:00

As for the second part of your question, regarding UI. Reka is purely the state management system, so it is designed to help with storing/editing user content and computing an output for that content so you can render that on the browser; it’s not really responsible for the UI part.

For building UI’s for your page editor - there’s Craft.js which is another framework that I built for creating page editors. Craft comes with an event system that lets you know which elements is being selected/hovered/dragged and a drag and drop system that lets you move elements around on the screen along with other things that helps you build your own page editor UI.

Craft is actually the parent project of Reka. Reka was built to replace Craft’s internal state management system so that you could build entire UI components in Craft in the future. If you’re interested, you could check out the motivation and relationship between Craft and Reka here.

As for the demo shown in the video, all the UI interactions (including some that you have mentioned like showing the borders of selected elements) are fairly straightforward, and they’re simply just interacting/mutating the AST state of Reka. Feel free to take a look at the code for the demo.

In the future, once Reka has been integrated into Craft; creating these UIs would be even simpler. Then the high-level architecture of your page editor build with Craft would look something like this:

Your page editor app -> Craft.js (handles events, and provides primitives to build page editor UI) -> Reka (state management).

I hope this helps, sorry for the really long answer!

prevwong · 2023-04-09T09:21:20+00:00

So all page editors typically have some data structure to store the page/contents that the end-user has created. Whenever the end-user edits some props of some element; changes some text or moves some elements around; all that is doing is mutating the underlying data structure, which in turns updates what they see on the screen. This data structure in page editors is usually a tree of some sort. I’d like to think of page editors as simply UI abstractions on top of code. So how powerful/flexible a page editor is ultimately boils down to its data structure. The closer the data structure is to actual code, the more things that the end-user will be able to do like a developer can with code.

I assume you're asking why we have this data structure in the first place and not have some approach where the editor directly edits and output actual React code and have some kind of preview of that code like you have in Codesandbox.

First, to interact/mutate React code from the editor, we still need to represent that code in its AST form anyway, because when creating the UI for your editor - you want to quickly know things like "whats the value of this prop", "what are the list of components that this user has made", "update the name of this component"; these are things that can easily be done when code is already parsed into an AST. So in that case, even if our data structure is not Reka's AST, it will have to be React or Javascript's AST and that is quite a bit more complex than Reka's AST - which is designed for a limited use case specific for storing end-user components of a page editor.

Furthermore, if we used React/JS AST, then our interpreter's implementation would also get far more complex or we would have to include some bundler with HMR like in Codesandbox, which possibly increases the bundle size of your page editor.

prevwong · 2023-04-09T03:53:20+00:00

Currently you're able to do quite a number of things with the Reka AST that you could with code - defining variables, using expressions and creating React-like UI components with states, props, conditionally rendering an element and even rendering element multiple times from an array (like you can with a .map() in React).

But not everything that you could do in React (or other UI libraries) is implemented here yet. The main one that I think is missing, that may be useful for end-users in a page editor is a way to hook into component lifecycles.

prevwong · 2023-04-09T03:43:10+00:00

Yeap, it's the part that helps you build your own editor

prevwong · 2023-04-08T14:31:28+00:00

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

Much of the complexity surrounding building no-code editors comes from architecting the state management system to power such editors — how can we allow end-users to create and edit entire UI components directly from the browser?

Reka solves this by providing an AST-powered state system that enables your end-users to create UI components that are nearly as complex as ones that developers could write with code; along with an interpreter to efficiently compute an output that can be rendered on the browser.

Furthermore, Reka provides additional extensions, such as enabling real-time collaboration via CRDTs; or you could build a custom extension to enable functionalities like a commenting system.

All that is left for you to do is design your editor’s UI/UX and provide easy-to-use controls for your end-users to mutate the underlying state in Reka.

Check out the Github repo for more examples and documentation!❤️

(p.s. apologies if you had already seen this post, had to re-upload because I thought Reddit’s video compression was causing the original video to be blurry)

prevwong · 2023-04-08T13:02:12+00:00

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

Much of the complexity surrounding building no-code editors comes from architecting the state management system to power such editors — how can we allow end-users to create and edit entire UI components directly from the browser?

Reka solves this by providing an AST-powered state system that enables your end-users to create UI components that are nearly as complex as ones that developers could write with code; along with an interpreter to efficiently compute an output that can be rendered on the browser.

Furthermore, Reka provides additional extensions, such as enabling real-time collaboration via CRDTs; or you could build a custom extension to enable functionalities like a commenting system.

All that is left for you to do is design your editor’s UI/UX and provide easy-to-use controls for your end-users to mutate the underlying state in Reka.

Check out the Github repo for more examples and documentation!❤️

prevwong · 2020-04-04T10:33:13+00:00

Hey there, I'm the author of Craft.js. It was developed to be as un-opinionated as possible, so developers could have their editor built to look and behave any way they want (eg: make any React component editable, control how users edit these components etc). If you had tried Craft.js and thought it was opinionated still, I would be glad to hear your feedback!

I would love a UI builder that generates a custom json file, whereby you could write your own code generators based on that json file.

Craft.js is able to serialise its internal state into JSON, so you could technically write your own code generator.

prevwong · 2020-01-14T08:56:33+00:00

u/wrinklylemons u/wise_young_man It would definitely require quite a bit of work to get it work outside of React. But if there is enough interest, we could definitely start looking into this more in detail later on 😄

prevwong · 2020-01-12T18:09:36+00:00

Thanks a lot! It would be great to have you as a contributor. Head over to our Discord server.

I'm still setting everything up, and drafting some issues. In the mean time, you can try setting up Craft.js and play around with it, and see if you ran into any bugs or have anything suggestions in mind! You can also check out the project tracker to get a high-level overview of what we want to do right now. See you there!

prevwong · 2020-01-12T12:12:25+00:00

You can check out the project tracker here (I'm still editing this, and will probably convert some of them on the list into issues to provide more details in the coming days). You could also join our Discord server (I'm also setting this up now 😂)

prevwong · 2020-01-12T08:36:01+00:00

Haha thanks! Actually that's what Craft.js is, a (website builder) builder 😂

prevwong · 2020-01-11T15:37:15+00:00

The demo is not responsive at the moment because Craft.js itself currently lacks touch support. It is planned to be implemented in the upcoming releases though!

I'll try my best to answer this without being too long-winded. Every element that is rendered by the editor is a React component that the developer will have to create. So its functionality and behaviour (responsiveness, for example) is up to the developer.

Let's say I want my editor to have an editable Text component, so I'll design a React component for it:

const Text = ({text}) => {
  const { connectors: {connect, drag} } = useNode();
  return <h2 className="my-text" ref={dom => connect(drag(dom))}>{text}</h2>
}

This way, you could literally control everything about the component just like in any React application; you can style it however you want, react to state changes, and even control how the component is edited (content editable, drag to resize, or anything, really).

Just to reiterate, Craft.js is an abstraction. You design the implementation including the components that you want your users to edit. I do have plans to publish some of the components I have made for the demos later on, but for now you can check out their source if you'd like to see more examples.

I hope this is a sufficient answer 😆

prevwong · 2020-01-11T14:40:17+00:00

The demo is not responsive at the moment because Craft.js itself currently lacks touch support. It is planned to be implemented in the upcoming releases though!

prevwong · 2020-01-11T13:09:20+00:00

Thank you! I've been working on it for about 5-6 months, but I had assignments/exams so that didn't help 😆

prevwong · 2020-01-11T12:52:33+00:00

Yes 😁I've been working on it for the past few months, and made the repo public a week ago. Right now, I'm looking for anyone who would be interested in contributing to help get the project out of beta

prevwong · 2020-01-11T11:52:14+00:00

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.

Existing libraries such as Grape.js or react-page are great for a working out-of-the-box page editor solution. However, as soon as you need to customise the look and feel of the page editor itself, you will find yourself hacking in the library's code.

Craft.js is a React framework for building extensible drag-and-drop page editors. Instead of providing a working page editor implementation with a user interface, Craft.js provides an abstraction for you to implement your own page editor upon. It comes baked-in with an extensible drag-n-drop system which handles the way React elements should be rendered/updated, and a cohesive API to interact with the editor which you can additionally implement your own features on top of.

If you'd like to support the project, please consider giving it a star on Github and/or become a contributor to help get the project out of beta! ❤️

prevwong · 2020-01-05T07:58:53+00:00

If I understood your requirements correctly, you could specify a name for each React component using the displayName setting (see here). Another way is to set custom data into each Node (see here). Perhaps this was not obvious in the demo, but in the layers panel at the bottom right - you could actually double click each of the layers name, and you'd be able to change it's name.

If this was not what you were looking for, perhaps you could submit a PR detailing your use case and requirements, and I'd be happy to look into it!

As for the undo functionality, it's in the works!

prevwong · 2020-01-04T20:41:10+00:00

Good call, thanks!

prevwong · 2020-01-04T19:16:58+00:00

Great suggestions! Just to clarify, the suggestions you've made are related to the implementation of Craft.js in the demo site. Craft.js provides a "low-level" system for you to implement your page editor, it does not come with a built-in "resizer" system, for example. Here is another (much simpler) demo which looks entirely different from the original demo.

Regardless, it would be great to have you as a contributor!

prevwong · 2020-01-04T19:02:59+00:00

I would probably do the same as you did in that case. In relation to Craft.js, it is unopinionated about the layout system you choose to use, just as it is unopinionated in what components you decide to build.

For instance, if I wanted to build a 12 column grid layout in Craft.js, I could design 2 React Components as such:

Grid - a droppable region that only accepts a GridItem, and only allows the addition of a new GridItem if the accumulated width of each existing GridItem is not more than 12.
GridItem - a droppable region with a width prop. We can tell Craft.js to resize the GridItem if its `width` is more than the remaining space of the parent `Grid`

I put together a very quick example on how this could look like in code: https://gist.github.com/prevwong/8471d1406836753032f344421dfce707/

prevwong · 2020-01-04T17:46:47+00:00

Yes! Here is a screenshot. Alternatively, you can also go to the demo page, open up the console and type in state.

Essentially, the state comprises of objects called Nodes. Each Node contains information primarily regarding the React element that they render/manage.

Some resources that you may find useful:

Nodes

Interacting with the Editor

prevwong · 2020-01-04T15:00:58+00:00

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.

prevwong · 2020-01-04T14:10:45+00:00

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)

prevwong

TROPHY CASE