I built my own WEBSITE BUILDER and you can do it too !

hi I'm Raj I've always been fascinated by no code website Builders tools like webflow Shuffle dodev and bubble offer a neat web app that you can use to build your websites with simple drag and drop in most cases you can also export the code from the tools I wanted to learn what it takes to build s a tool and also understand the architecture Behind these tools so I took the challenge of building a sample app that will enable me to drag and drop my UI components onto the canvas and then export the code into react typescript code which you can copy and paste inside your code base this tool is a bit more of a rough implementation of my idea that's why I call it a starter app you can find the gabrio in the description and right now it only supports few components but you can also scale it to support more shats in UA components there are a lot of things to break down learn and understand cuz this is a fairly complex topic so what I'm going to do is I'm going to break this content down into through three sections in the first section we're going to talk about how do these website Builders work and what's the architecture behind them in the next section we're going to talk about what are the tools Frameworks and libraries in the market that will enable you to build a no code website builder lastly we're going to take a detailed walk through of the stter app that I've just built and also tell you what are the tools I used in order to build this St app if you have worked with a website builder before you typically have three parts play the first is a section of components and these components are the ones you can drag and drop onto the canvas the next is a canvas where we assemble drag and drop your components and then you have a section to control your components and users should be able to drag and drop the components inside the canvas and select them and also edit them in the control section and each component has a state that is reflected on the control section and the component should update a the state changes on the control section and this canvas also has a state that contains all the components that are part of this canvas and the state usually is in form of a huge Json tree and you can use the Json tree to load the page again on the tool when you come back to work on the tool and also use it to export code or generate HTML imagine if you decide to go through the pain of building a website builder what are the tool tools and libraries and Frameworks available for you in the market the first tool that you have at your disposal is called grape. JS it's a website builder framework and it's an elaborate framework that's built on top of backbone an old JavaScript framework and from what I know it seems fully functional with really nice apis and you only have nine issues on the GitHub so I assume that they are actively maintaining it I personally did not use this library because I prefer using react like API and also hooks to build my website Builders so that led me to another framework called craft. JS and this is the framework that I used to build my sta app that you just saw it's built on top of react and the apis are a mix of react components and hooks that play really well with the declarative react architecture if you take a look at the Docks you have a nice set of information that you can find on Core Concepts and API reference and also a small tutorial on how to build some sample apps app s and what I love about craft JS is that they make it so easy to build the architecture that we talked about if you want to connect your control panel state to a component you can simply add a field called Craft on top of the component definition and you're good to go although craft JS is an interesting tool it's mainly used to build a UI and the tool doesn't really support JavaScript interactions and State Management inside the canvas that you're building but the author is working on another state layer on top of craft Js called Riker JS that integrates JavaScript interactions and State Management baked into the tool that is the reason why I personally think that if you want to build a website builder I would highly recommend using craft JS as we are talking about craft JS there is another interesting craft JS project called daack it's a really cool open- Source website builder and also a great Learning Resource now that we've talked about tools and architecture let's take a look at the app that I've built and see how it works um this app that I've built is entirely based on the architecture that we talked about but it's built on top of remix and craft Chase we have our list of UI components that are draggable and you can drag and drop them on the canvas these components are also connected to the control panel and you can update the state of those components by changing or updating the values inside the control panel I don't really have lots of settings I only have three settings the first one is for delete and then the other one for you know HTML and the last one for adding Tailwind uses the craft J framework already comes with few indicator for droppable zones the green indicator here means that you can drop the item here and if it's red that means it's not really draggable or droppable for example in this card component I've not made the card header dragable so that means if if I try to drag it you will see a red indicator and craft J is also offers you the ability to undo and redo with simple API call actions if I change something I can simply undo and redo my last activity finally I can also export the state of the canvas into the code so what essentially happens here is that I use the Json tree that holds the state of my entire canvas and walk through them and pick the components along with your props and build my typescript code the code is fairly straightforward and before you jump in and try to understand the code I would recommend you to go through the docks of The Craft JS to get the basics right as I've said before this is just a walkth through of the app and also make you understand how these website Builders work and if you want me to build this app from scratch let me know in the comments I will see what I can do thanks for watching this video if you like the video please leave a like And subscribe for more and I will talk to you soon

Channel: Raj talks tech

Views: 8,134

Keywords:

Id: INNjkgE5p0o

Length: 6min 23sec (383 seconds)

Published: Sat Feb 17 2024