Simplest possible setup

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
</div>

<div id="blocks"></div>

Babel + JSX

const editor = grapesjs.init({
  container: '#gjs',
  // Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,
  height: '300px',
  width: 'auto',
  storageManager: false,
  canvasCss: '[data-gjs-type="wrapper"] { min-height: 100vh }',
  blockManager: {
    appendTo: '#blocks',
    blocks: [
      {
        id: 'section', // id is mandatory
        label: '<b>Section</b>', // You can use HTML/SVG inside labels
        attributes: { class:'gjs-block-section' },
        content: `<section>
          <h1>This is a simple title</h1>
          <div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
        </section>`,
      },
    ]
  }
});

editor.on('frame:load:before', ({ el }) => {
  const doc = el.contentDocument;
  console.log(doc);
  doc.open();
  doc.write('<!DOCTYPE html>');
  doc.close();
});

editor.render();