diff --git a/docs/.vuepress/components/demos/utils.js b/docs/.vuepress/components/demos/utils.js
index d53dcd6ac..52de21a43 100644
--- a/docs/.vuepress/components/demos/utils.js
+++ b/docs/.vuepress/components/demos/utils.js
@@ -140,7 +140,6 @@ var panelSwitcher = {
           const row = this.getRowEl(editor);
           const lmEl = this.getLayersEl(row);
           lmEl.style.display = 'none';
-          sender && sender.set('active', false);
         },
       },
     }, {
@@ -161,7 +160,6 @@ var panelSwitcher = {
           const row = this.getRowEl(editor);
           const smEl = this.getStyleEl(row);
           smEl.style.display = 'none';
-          sender && sender.set('active', false);
         },
       },
     }
diff --git a/docs/.vuepress/public/assets-builtin-modal.png b/docs/.vuepress/public/assets-builtin-modal.png
new file mode 100644
index 000000000..ab6e7dcc6
Binary files /dev/null and b/docs/.vuepress/public/assets-builtin-modal.png differ
diff --git a/docs/.vuepress/public/assets-empty-view.png b/docs/.vuepress/public/assets-empty-view.png
new file mode 100644
index 000000000..ac79c18b9
Binary files /dev/null and b/docs/.vuepress/public/assets-empty-view.png differ
diff --git a/docs/.vuepress/public/assets-full-dropzone.gif b/docs/.vuepress/public/assets-full-dropzone.gif
new file mode 100644
index 000000000..007d35e28
Binary files /dev/null and b/docs/.vuepress/public/assets-full-dropzone.gif differ
diff --git a/docs/.vuepress/public/assets-svg-view.png b/docs/.vuepress/public/assets-svg-view.png
new file mode 100644
index 000000000..56312c1d0
Binary files /dev/null and b/docs/.vuepress/public/assets-svg-view.png differ
diff --git a/docs/.vuepress/public/assets-uploader.png b/docs/.vuepress/public/assets-uploader.png
new file mode 100644
index 000000000..d9919926e
Binary files /dev/null and b/docs/.vuepress/public/assets-uploader.png differ
diff --git a/docs/.vuepress/public/blocks3.jpg b/docs/.vuepress/public/blocks3.jpg
new file mode 100644
index 000000000..437ca683d
Binary files /dev/null and b/docs/.vuepress/public/blocks3.jpg differ
diff --git a/docs/.vuepress/public/btn-clicked.png b/docs/.vuepress/public/btn-clicked.png
new file mode 100644
index 000000000..a257fc636
Binary files /dev/null and b/docs/.vuepress/public/btn-clicked.png differ
diff --git a/docs/.vuepress/public/canvas-panels.jpg b/docs/.vuepress/public/canvas-panels.jpg
new file mode 100644
index 000000000..7f71904a5
Binary files /dev/null and b/docs/.vuepress/public/canvas-panels.jpg differ
diff --git a/docs/.vuepress/public/default-gjs.jpg b/docs/.vuepress/public/default-gjs.jpg
new file mode 100644
index 000000000..c475744ef
Binary files /dev/null and b/docs/.vuepress/public/default-gjs.jpg differ
diff --git a/docs/.vuepress/public/default-sm.jpg b/docs/.vuepress/public/default-sm.jpg
new file mode 100644
index 000000000..3b8dfed04
Binary files /dev/null and b/docs/.vuepress/public/default-sm.jpg differ
diff --git a/docs/.vuepress/public/default-traits.png b/docs/.vuepress/public/default-traits.png
new file mode 100644
index 000000000..406076565
Binary files /dev/null and b/docs/.vuepress/public/default-traits.png differ
diff --git a/docs/.vuepress/public/demo-view.png b/docs/.vuepress/public/demo-view.png
new file mode 100644
index 000000000..f76040432
Binary files /dev/null and b/docs/.vuepress/public/demo-view.png differ
diff --git a/docs/.vuepress/public/empty-gjs.png b/docs/.vuepress/public/empty-gjs.png
new file mode 100644
index 000000000..4f88ee921
Binary files /dev/null and b/docs/.vuepress/public/empty-gjs.png differ
diff --git a/docs/.vuepress/public/enabled-sm.jpg b/docs/.vuepress/public/enabled-sm.jpg
new file mode 100644
index 000000000..8ad8d2025
Binary files /dev/null and b/docs/.vuepress/public/enabled-sm.jpg differ
diff --git a/docs/.vuepress/public/input-custom-traits.png b/docs/.vuepress/public/input-custom-traits.png
new file mode 100644
index 000000000..37c731bf7
Binary files /dev/null and b/docs/.vuepress/public/input-custom-traits.png differ
diff --git a/docs/.vuepress/public/new-btn.png b/docs/.vuepress/public/new-btn.png
new file mode 100644
index 000000000..45a38e33e
Binary files /dev/null and b/docs/.vuepress/public/new-btn.png differ
diff --git a/docs/.vuepress/public/new-panel.png b/docs/.vuepress/public/new-panel.png
new file mode 100644
index 000000000..2eea4b302
Binary files /dev/null and b/docs/.vuepress/public/new-panel.png differ
diff --git a/docs/.vuepress/public/style-comp.jpg b/docs/.vuepress/public/style-comp.jpg
new file mode 100644
index 000000000..4038aff38
Binary files /dev/null and b/docs/.vuepress/public/style-comp.jpg differ
diff --git a/docs/getting-started.md b/docs/getting-started.md
index bddfcfc83..840e1fd10 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -4,6 +4,7 @@ meta:
   - name: keywords
     content: grapesjs getting started
 ---
+TODO: webpage preset link
 
 # Getting Started
 
@@ -312,12 +313,12 @@ const editor = grapesjs.init({
             id: 'show-layers',
             active: true,
             label: 'Layers',
-            command: 'commandShowLayers',
+            command: 'show-layers',
           }, {
             id: 'show-style',
             active: true,
             label: 'Styles',
-            command: 'commandShowStyle',
+            command: 'show-styles',
         }],
       }
     ]
@@ -366,7 +367,7 @@ const editor = grapesjs.init({
 });
 
 // Define commands
-editor.Commands.add('commandShowLayers', {
+editor.Commands.add('show-layers', {
   getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
   getLayersEl(row) { return row.querySelector('.layers-container') },
 
@@ -377,10 +378,9 @@ editor.Commands.add('commandShowLayers', {
   stop(editor, sender) {
     const lmEl = this.getLayersEl(this.getRowEl(editor));
     lmEl.style.display = 'none';
-    sender && sender.set('active', false);
   },
 });
-editor.Commands.add('commandShowStyle', {
+editor.Commands.add('show-styles', {
   getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
   getStyleEl(row) { return row.querySelector('.styles-container') },
 
@@ -391,7 +391,6 @@ editor.Commands.add('commandShowStyle', {
   stop(editor, sender) {
     const smEl = this.getStyleEl(this.getRowEl(editor));
     smEl.style.display = 'none';
-    sender && sender.set('active', false);
   },
 });
 ```
@@ -400,16 +399,17 @@ editor.Commands.add('commandShowStyle', {
   <DemoStyle/>
 </Demo>
 
-Now any component could be defined with its own style, you can add any other CSS property to your sectors and configure it by your needs.
+Inside Style Manager definition we use `buildProps` to create properties from [available built-in objects](modules/Style-manager.html#built-in-properties) then in `properties` we can override same objects (eg. passing another `name` to change the label) identified by `property` name. As you can see from `custom-prop` example it's a matter of defining the CSS `property` and the input `type`. We suggest to check a more complete example of Style Manager properties usage from the [webpage preset](##)
 
-<!-- To get more about style manager extension check out this guide.
+<!--
+To get more about style manager extension check out this guide.
 Each component can also indicate what to style and what not.
 
 -- Example component with limit styles
 -->
 
 ## Traits
-Most of them time you would style your components and you would place them somewhere in the structure, but sometimes your components might need custom attributes or even behaviours
+Most of them time you would style your components and you would place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits
 
 ## Devices
 Grapesjs implements also a built-in module witch allows you to work with responsive templates easily. Let's see how to define different devices
diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md
index 4dec716b7..318b794e1 100644
--- a/docs/modules/Assets.md
+++ b/docs/modules/Assets.md
@@ -153,7 +153,7 @@ If you want a complete list of available properties check the source [AssetImage
 The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)
 
 
-[[img/assets-builtin-modal.png]]
+<img :src="$withBase('/assets-builtin-modal.png')">
 
 
 Showing up of the modal is registered with a command, so you can make it appear with this
@@ -315,7 +315,7 @@ am.render(am.getAll().filter(
 
 You should see something like this
 
-[[img/assets-empty-view.png]]
+<img :src="$withBase('/assets-empty-view.png')">
 
 
 The SVG asset is not correctly rendered and this is because we haven't yet configured its view
@@ -349,7 +349,7 @@ am.addType('svg-icon', {
 
 This is the result
 
-[[img/assets-svg-view.png]]
+<img :src="$withBase('/assets-svg-view.png')">
 
 
 Now we have to deal with how to assign our `svgContent` to the selected element
@@ -465,7 +465,7 @@ am.addType('image', {
 Asset Manager includes an easy to use, drag and drop, uploader and integrates few UI helpers. The default uploader is already visible when you open the Asset Manager.
 
 
-[[img/assets-uploader.png]]
+<img :src="$withBase('/assets-uploader.png')">
 
 
 You can click on the uploader to start select your files or just drag them directly from your computer to trigger the uploader. Obviously, before make it work you have to setup your server in order to receive your assets and specify the upload endpoint in configurations
@@ -552,8 +552,7 @@ When the uploading is over, by default (via config parameter `autoAdd: 1`), the
 
 There is also another helper which improve the uploading of assets, a full-width editor dropzone.
 
-
-[[img/assets-full-dropzone.gif]]
+<img :src="$withBase('/assets-full-dropzone.gif')">
 
 
 All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)
diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md
index 7e140198e..df69e271c 100644
--- a/docs/modules/Traits.md
+++ b/docs/modules/Traits.md
@@ -25,7 +25,7 @@ In GrapesJS, Traits could define different parameters and behaviors of a single
 
 You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:
 
-[[img/default-traits.png]]
+<img :src="$withBase('/default-traits.png')">
 
 In this case we gonna create a new Component ([check here](Components) for more details about the creation of new components) with a new set of traits
 
@@ -73,7 +73,7 @@ domComps.addType('input', {
 
 Now the result will be
 
-[[img/input-custom-traits.png]]
+<img :src="$withBase('/input-custom-traits.png')">
 
 By default, traits modify attributes of the model (which than reflected in canvas) but you can also have traits which change the property