Creating a visual builder like Webflow
What is the need?
Many situations demand certain portions of the website to be easily editable by employees who do not know how to code. At the same time, developers need to code the complicated portion of the website. We have seen many companies juggling between NextJS and Webflow and cooking up hacks such as deploying different portions of their website in different domains.
What did I learn from Webflow before I started out creating my framework?
Do not abstract CSS, or be as close to CSS as possible.
Do not allow users to drop components just anywhere on the webpage.
What are the similarities between Webflow and Atri framework?
- Our visual builder is heavily inspired by the design of Webflow. The drag-drop experience matches to that of Webflow.
How has Atri implemented its visual builder?
Before we understand the implementation, we need to understand the goals we want to achieve beyond just basic drag-drop:
Unlike Webflow, Atri’s visual builder gives the ability to developers to create custom React components that can be dragged-dropped by others in the team.
Atri’s visual builder also has plans to allow developers to write plugins to enhance the functionalities of the visual editor.
Idea 1
To enable custom React components, the editor’s code is broken down into smaller bundles. After some basic bundles have been loaded, other bundles containing new React components or other plugins can be loaded incrementally. Some code that is common between all the bundles, such as the code that manages the state of the editor, and the manifest registries that hold information about the available drag-drop components, must be available as separate entry points in webpack otherwise each bundle will have their own version of this common ( shared ) code.
Idea 2
One challenge was that all the incremental bundles must share the same React runtime. To solve this problem, we use the externals feature of webpack. We make the “react” & “react-dom” libraries to be external and load their scripts in the UMD format in the index.html.
Idea 3
Custom babel loaders to fill in the details from the config files. The code architecture depends on config files that will ensure that we can have a plugin system in the future.