The “no-code” and “low-code” space is exploding, with tools such as Webflow, Bubble, Notion, Airtable, Zappier, & etc. Some are website builders, while others productivity tools, but one thing is for certain. They are all software products, and they require complex user interface requirements.
Builders like Webflow & Bubble are limiting to the components they provide. Even if custom components can be added, they require code to be written. Not only that, there is no real state management tool on the frontend, and it is difficult to bind data in a fine-grained manner.
Comes Codelab, a powerful user interface builder conceived from first principle concepts in software engineering.
The basis of a DOM tree is a specialized graph. If we can create a user interface that allows the building of any graph data structure, then we build anything that can be abstracted to a graph.
Graphs are powerful, basically anything can be represented as a graph. Think about data schema modeling, DOM tree’s, class inheritance structure’s, control flows, & etc.
Essentially, our builder will be able to handle all those software concepts. It just requires some domain specific nodes & edge connections to fully represent those concepts.
I’ve named many software concepts that uses graphs, but we’re building an interface builder, which is a DOM tree. This means our nodes & edges will be specific to UI’s.
This is the overview of the project when thinking of it in a first principle mindset.
We're working on a SaaS product that would enable developers to painlessly build out UI without any template restrictions. Using only UI, we can enable developers to construct the DOM tree from HTML, or integrated React framework components. So far we've integrated Ant Design & MUI, and users has full control over all their props.
A local store with classes allow properties and methods to be set. We've created a system to manage this store in the UI. The UI could bind state properties as value or methods as event callbacks. The local store could also interact with API calls to sync data.
We decided to keep the concept of props, which is basically just data of objects that are bound to components. Props can pass from components downwards & be modified along the way. This enables great configurability and maintain a similar concept to frontend development.