HTML Editor UI
You can add, set, and delete elements from the canvas. In addition, you can import and export HTML and CSS code. Here is a description of the setting panels of the editor.
The Blocks Tab
After opening the editor in the launched application, you can see the Blocks tab.
The block in GrapesJS is a reusable piece of HTML that you can drop on the canvas.
The set of elements depends on the added UI components. The following elements can be enabled for adding:
-
in the Basic section:
Columns
,Text
,Image
,Video
,Map
,Link
,Text Section
,Link Block
. -
in the Extra section:
Navbar
,Tabs
,Custom Code
. -
in the Forms section:
Form
,Input
,Textarea
,Select
,Button
,Label
,Checkbox
,Radio
.
![html editor ui](_images/html-editor-ui.png)
The Style Manager Tab
You can set the properties of the elements. Select the element and go to the Style Manager tab.
![style manager tab](_images/style-manager-tab.png)
The Trait Manager Tab
You can define the parameters of the element. Select the element and go to the Trait Manager tab.
![trait manager tab](_images/trait-manager-tab.png)
The Layers Tab
To watch the list of elements on the canvas, go to the Layers tab. You can hide elements on the canvas while editing.
![layers tab](_images/layers-tab.png)
The Top Panel Buttons
The following buttons on the Top Panel are available:
-
the Show borders button
-
the Preview button
-
the Full-screen button
-
the Export button
-
the Undo button
-
the Redo button
-
the Import button
-
the Clear canvas button
-
buttons for changing the screen width
![top panel](_images/top-panel.png)