Скачать или смотреть #4 - Create our own Website Builder. Web page Builder - Grapes JS - No Code

We are going to customize the default UI of the GrapesJS library by using Bootstrap 5.

00:00 Demo
01:36 Cleaning old code
02:57 Add Bootstrap 5 CSS and JS
03:06 Add Basic Block Plugin
04:16 Create Layout
06:38 Add style for Sidebar
10:36 Add Company Name in Sidebar
11:50 Add button to create new Page
15:00 Add list group to show all pages
27:56 Add Navbar in the main content
30:39 Configure Basic Block
32:18 Customize Library to use our layout
35:50 Add style to hide library default layout

38:12 Change default color of library
40:15 Add panels to show Device Manager and other commands
47:28 Test application

[Medium Blog](  / second-story-customize-grapesjs-editor  )

Complete Series
1.    • #1 - Example of Grapes JS - Create a websi...  
2.    • #2 - Create simple Drag and Drop Webpage B...  
3.    • #3 - Key Terms of GrapesJS which will help...  
5.    • #5 - Create Web Page Builder - Add Trait S...  
6.    • #6 - Add Bootstrap Modal to create Page Gr...  
7.    • #7 - Add Node Express to our Application -...  
8.    • #8 - Create Mongoose Modal for Page - Grap...  
9.    • #9 - Create Page in Database from UI to st...  
10.    • #10 - Save Page HTML from Editor to Server...  

[VanillaJS GrapesJS and Server Repo](https://github.com/code-dexterous/gra...)

#node, #no-code, #nocode, #zero-code, #reactjs, #grapesjs