Create your own Webpge/Website Builder
We are going to use GrapesJS library to create our own Website builder.
Before we go on coding part let see the folder structure we follow.
We will VS-Code which is very lightweiight editor with bunch of functionalities and a lot of plugins to imrove our poductivity.
If you want to know about the VS-Code and plugins then let me know.
I already have created a Video for this tutorial, if you prefer to watch the video instead of follow the video the please visit.
You can find the code on github
https://github.com/vijayshukla30/grapesjs-example-html
So let us start.
- Create a folder for our project
- Open folder to VS-Code
- Create folder structure as we have in above image
- Create indext.html, css/main.scss, js/main.js
I am using SCSS for our styling but we include main.css file in index.html. We used SCSS because it makes writing styling efficiently.
Copy grapes.min.js, css/grapes.min.css and fonts files from https://github.com/artf/grapesjs/tree/v0.16.44/dist to our project or you can download the latest release.
Grapes JS has a lot of plugins which we can use, but for this project we are going to use GrapesJS Preset Webpage which is a combination of other plugins. In future we will create our own plugins too.
Now, copy grapesjs-preset-webpage.min.js and grapesjs-preset-webpage.min.css from https://github.com/artf/grapesjs-preset-webpage/tree/master/dist
Now paster CSS to css/lib and JS to js/lib. That’s it for setup, now we are going to create our files.
Add below content in index.html
I have added all libraries and created a div element with id editor.
Add code in main.js
By default it uses localstorage of the browser.
There is nothing important in main.css but I don’t like the default Scroll so I just hide that but keeping the scroll functionality.
Tadadda.
This is the final result which we will have in browser.
