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>
  <button onclick="change()" style="padding: 15px; margin-bottom: 15px">
  Change to Hello Planet
  </button>
<div id="gjs">
  <div style="padding: 25px; color: red; /* height 200px; */; font-weight: bold;" id="text" >Hello World!!!</div>

</div>

CSS

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

Babel + JSX

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

function change() {

const element = editor.DomComponents.getById('text')
element.components('Hello Planet')
}