Tech Stack Used: Next.js , Vercel , Material UI , Firebase , React

We wanted a way to speed up the time taken to deliver a website to clients, while retaining control of the code & the tech stack we preferred. So, we built a website builder that has the following features:

✅ Responsive building

✅ Code injection

✅ Custom component adding

✅ Drag-n-Drop elements

✅ Extensive styling options

✅ Preview

For the curious: Why did we build our own website builder?

We wanted a way to speed up the time taken to deliver a website to clients, while retaining control of the code & the tech stack I preferred. Existing website builders proved to be either inadequate or just too expensive. A majority of them did not allow customizations the way my clients or we wanted. We also wanted a way to add any features/extensions via code that were not available in the builder. We decided building a website builder on my own was the only viable option.

We started with looking for open source alternatives that we could build on top of, but couldn't find any that was react based. So we decided to look for libraries that would make our job easier, instead. We stumbled upon one called CraftJS, that we ended up using for this project. CraftJS made our job of building a drag-n-drop interface easier. The stack we primarily used was NextJS + React for the builder, with firebase as the backend. Some of the building blocks were implemented using MUI.

The part where we struggled the most while developing was getting the blocks to render in an iFrame, so that the iFrame can then be resized to simulate different device sizes. This was a crucial feature, since it allowed for responsive design, which is paramount for sites today. The other challenging part was the functionality to inject custom code components into a site made via the builder.

Our website builder has all the standard functionalities that are requisite to build a website, while allowing us to modify the exported React code to add any complex functionalities. All the sites made using the builder are highly optimised, with an average 95+ speed score on pagespeed insights. Further, all the sites are served via Server Side Rendering, thus making them easily indexable for search engines. We further plan on adding animation modules to it, along with the ability to build forms.