title: How to Fully customize GrapesJs UI
body: <p>I am using Grapesjs in my web Application for creating web pages. As I am new to GrapesJS I am not sure how to customize the UI from GrapesJs .
  I just use this code.</p>
  <pre class="lang-js prettyprint-override"><code>      const editor = grapes.init({
          container: '#gjs',
          fromElement: true,
          plugins: [&quot;gjs-blocks-basic&quot;, &quot;gjs-plugin-ckeditor&quot;,
            editor =&gt; gjsForms(editor, { /* options */ }),
            editor =&gt; gjsnavbar(editor, { /* options */ }),
            editor =&gt; styleFilter(editor, { /* options */ }),
            editor =&gt; plugin(editor, { /* options */ }),
            editor =&gt; flexbox(editor, { /* options */ }),
            editor =&gt; slider(editor, { /* options */ }),
            editor =&gt; tabs(editor, { /* options */ }),
            editor =&gt; customcode(editor, { /* options */ }),
            editor =&gt; tooltip(editor, { /* options */ }),
            editor =&gt; gjstouch(editor, { /* options */ }),
            editor =&gt; thePlugin(editor, { /* options */ }),
          ],
          pluginsOpts: {
            &quot;gjs-blocks-basic&quot;: {
              /* ...options */
            },
            'gjs-plugin-ckeditor': {
              options: {
                language: 'en',
                startupFocus: true,
                extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
                allowedContent: true, // Disable auto-formatting, class removing, etc.
                enterMode: CKEDITOR.ENTER_BR,
                uiColor: '#0000001a', // Inline editor color
                extraPlugins: 'justify,colorbutton,panelbutton,font,sourcedialog,showblocks',
                toolbar: [
                  [&quot;Format&quot;, &quot;-&quot;, &quot;Bold&quot;, &quot;Italic&quot;, &quot;Strike&quot;, &quot;Underline&quot;, &quot;Subscript&quot;, &quot;Superscript&quot;, &quot;RemoveFormat&quot;, &quot;-&quot;, &quot;NumberedList&quot;, &quot;BulletedList&quot;, &quot;-&quot;, &quot;Outdent&quot;, &quot;Indent&quot;, &quot;-&quot;, &quot;JustifyLeft&quot;, &quot;JustifyCenter&quot;, &quot;JustifyRight&quot;, &quot;JustifyBlock&quot;, &quot;-&quot;, &quot;Link&quot;, &quot;Unlink&quot;, &quot;Anchor&quot;, &quot;TextColor&quot;, &quot;BGColor&quot;, &quot;-&quot;, &quot;ShowBlocks&quot;, &quot;-&quot;, &quot;Image&quot;, &quot;Table&quot;, &quot;-&quot;, &quot;Sourcedialog&quot;]
                ]
              },
              position: 'left',
            }
          },
          fromElement: false,
          components: LandingPage.components || LandingPage.html,
          style: LandingPage.style || LandingPage.css,
        });
  
        editor.getConfig().showDevices = 0;
  
        editor.Panels.addPanel({
          id: &quot;devices-c&quot;
        }).get(&quot;buttons&quot;).add([{
            id: &quot;set-device-desktop&quot;,
            command: function(e) {
              return e.setDevice(&quot;Desktop&quot;)
            },
            className: &quot;fa fa-desktop&quot;,
            active: true
          }, {
            id: &quot;set-device-tablet&quot;,
            command: function(e) {
              return e.setDevice(&quot;Tablet&quot;)
            },
            className: &quot;fa fa-tablet&quot;
          }, {
            id: &quot;set-device-mobile&quot;,
            command: function(e) {
              return e.setDevice(&quot;Mobile portrait&quot;)
            },
            className: &quot;fa fa-mobile&quot;
          },
        ]);
  
        // Panel should re render again otherwise 
        // New button will not be shown on device panel
        editor.Panels.render();
      });
    }
  },
  </code></pre>
  <p>it work fine an it show as <a href="https://i.stack.imgur.com/F7axt.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Now i want to change it . style of the editor
  Fully customize .
  Hide sidebar
  Show only when select canvus object
  Change Icon
  Change Color
  Change text Editor
  How to do these task . I Have no Idea . Let me know if there is some best source to clear all things</p>