Show HN: Build your own no-code editor with Reka.js

[prevwong]

https://reka.js.org

Much of the complexity surrounding building no-code editors come 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 end-users to create UI components that are nearly as complex as ones that developers could write in code; along with an interpreter to efficiently compute an output that could 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 support additional functionalities such as a commenting system.

All that's left is for you to build your own UI abstractions on top of Reka — designing your editor UI/UX and providing easy-to-use buttons/controls for your end-users to mutate the underlying state in Reka.

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

[volkandkaya]

I see you was inspired by https://github.com/BuilderIO/mitosis was there no way to extend there AST?

[prevwong → volkandkaya]

Mitosis is indeed one of the inspirations for the project.

I was initially considering to use their AST especially for the ability of transpiling to React/Vue/Svelte. Of course the goals of Mitosis and Reka are different; and in particular - I wasn't quite sure about some parts of their AST where it seems to represent expressions as code in strings instead of individual AST nodes. For example, let's say we have the following element:

<button type={state.someVariable} />

In Mitosis, the value for the "type" prop will { "code": "state.someVariable" }. In Reka, the value would be an AST node { "type: "MemberExpression", ... }. Which means, when I have to evaluate the AST on runtime - if using Mitosis, I would have to either parse this expression first before I can do anything with it, or use something like eval() which requires the consumer to enable "unsafe-eval" in their CSP of their application, which feels like a big ask.

The first option seems more reasonable than the second one, but it also means I have one extra step to do on evaluation and I will have to include the parser as a runtime dependency.

Furthermore, I feel like having everything as an AST node feels a bit easier to work with. For example, you probably don't want your end-users of your page editor to interact with code directly; you probably want to build some UIs to make it easier for them; in which case it's easier to build UIs when you already have the AST nodes rather than on code that's not yet passed.

[ReD_CoDE]

How to change components? I tried to change them but I don't know how Nice work, but this way is a bad way, even if there be some similar web builders that are "somewhat" successful

[prevwong → ReD_CoDE]

I assume you are asking about how to change a component that a template is referencing. A component template's node that is stored in the State looks like so: { type: "ComponentTemplate", component: { type: "Identifier", name: "Button" } }

So to change "Button" to another component would basically mean changing the component.name property to a different component. I didn't add the UI to do this in the demo, but you could try this on the demo by clicking on the "Edit code" button and changing the template tag.

I would like to hear more why you think this is a bad way. Just to clarify, Reka is NOT a page builder by itself. It's a state management system to build a page builder (or any no-code editor), so it's up to the consumer to build easy-to-use UI abstractions on top of Reka. For example, to achieve the example above where the user can change components - we could easily build a button that simply mutates the underlying state.

[Fuong]

Really nice work! Amazing project that I just figured out. Thankss !

[prevwong → Fuong]

Thank you!