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 editor = grapesjs.init({
  container: "#gjs",
  fromElement: 1,
  height: "100%",
  storageManager: { type: 0 },
  plugins: ["gjs-blocks-basic"],
  projectData: {
    pages: [
      {
        id: "UFiLLUGAYcvcPj4y",
        type: "main",
        frames: [
          {
            id: "2o2tGqkjicqQRlI1",
            component: {
              head: { type: "head" },
              type: "wrapper",
              docEl: { tagName: "html" },
              stylable: [
                "background",
                "background-color",
                "background-image",
                "background-repeat",
                "background-attachment",
                "background-position",
                "background-size",
              ],
              attributes: { id: "idjj" },
              components: [
                {
                  type: "text",
                  content: "Insert your text here AAA",
                  attributes: { id: "ima5" },
                },
              ],
            },
          },
        ],
      },
    ],
    assets: [],
    styles: [{ style: { padding: "10px" }, selectors: ["#ima5"] }],
    symbols: [],
    dataSources: [
      { id: "test-source", records: [{ id: "test", name: "Test" }] },
    ],
  },
});

editor.onReady(() => {
 console.log('Total of data sources should be 1:', editor.DataSources.getAll().length)
 console.log('test-source should exist:', editor.DataSources.get("test-source"));
});