GrapesJS Starter

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 style="padding: 25px">Hello World!!!</div>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const escapeName = (name) => `${name}`.trim().replace(/([^a-z0-9\w-:/]+)/gi, '-');

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic'],
  //SelectorManager: { escapeName },
});

const domc = editor.DomComponents;

domc.addType('hero-section-1', {
  model: {
    defaults: {
      attributes: { class: 'hero-section-1' },
      components: ` <div class="md:p-18">TTT</div>`,
      styles: `
        @media (min-width: 768px) {
          .md\\:p-18 { padding: 4rem; }
        }
            `
    },
  },
})

editor.BlockManager.add('hero-section-1', {
  category: "Hero",
  id: "hero-section-1",
  label: 'Hero Section 1',
  attributes: { class: 'gjs-block-hero-section-1' },
  content: {
    type: 'hero-section-1',
  },
});