добавил скрипт генерации кода

dist/bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var e,n,t,r={756:(e,n,t)=>{t.d(n,{Z:()=>i});var r=t(645),o=t.n(r)()((function(e){return e[1]}));o.push([e.id,"#app {\n  position: relative;\n}\n\n.content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 200px;\n}\n\n.sidebar {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 200px;\n  z-index: 100;\n  padding: 10px;\n  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);\n  overflow-y: auto;\n}\n",""]);const i=o},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=e(n);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(t&&(s[2]?s[2]="".concat(t," and ").concat(s[2]):s[2]=t),n.push(s))}},n}},379:(e,n,t)=>{var r,o=function(){var e={};return function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[n]=t}return e[n]}}(),i=[];function a(e){for(var n=-1,t=0;t<i.length;t++)if(i[t].identifier===e){n=t;break}return n}function c(e,n){for(var t={},r=[],o=0;o<e.length;o++){var c=e[o],s=n.base?c[0]+n.base:c[0],u=t[s]||0,l="".concat(s," ").concat(u);t[s]=u+1;var d=a(l),f={css:c[1],media:c[2],sourceMap:c[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:l,updater:h(f,n),references:1}),r.push(l)}return r}function s(e){var n=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=t.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){n.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(n);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(n)}return n}var u,l=(u=[],function(e,n){return u[e]=n,u.filter(Boolean).join("\n")});function d(e,n,t,r){var o=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=l(n,o);else{var i=document.createTextNode(o),a=e.childNodes;a[n]&&e.removeChild(a[n]),a.length?e.insertBefore(i,a[n]):e.appendChild(i)}}function f(e,n,t){var r=t.css,o=t.media,i=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var p=null,v=0;function h(e,n){var t,r,o;if(n.singleton){var i=v++;t=p||(p=s(n)),r=d.bind(null,t,i,!1),o=d.bind(null,t,i,!0)}else t=s(n),r=f.bind(null,t,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=(void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r));var t=c(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<t.length;r++){var o=a(t[r]);i[o].references--}for(var s=c(e,n),u=0;u<t.length;u++){var l=a(t[u]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}t=s}}}}},o={};function i(e){if(o[e])return o[e].exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return i.d(n,{a:n}),n},i.d=(e,n)=>{for(var t in n)i.o(n,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},i.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),e=i(379),n=i.n(e),t=i(756),n()(t.Z,{insert:"head",singleton:!1}),t.Z.locals})();
+(()=>{"use strict";var e,t,n,r={756:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(645),o=n.n(r)()((function(e){return e[1]}));o.push([e.id,"#app {\n  position: relative;\n}\n\n.content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 200px;\n}\n\n.sidebar {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 200px;\n  z-index: 100;\n  padding: 10px;\n  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);\n  overflow-y: auto;\n}\n",""]);const i=o},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);r&&o[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}},379:(e,t,n)=>{var r,o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),i=[];function a(e){for(var t=-1,n=0;n<i.length;n++)if(i[n].identifier===e){t=n;break}return t}function s(e,t){for(var n={},r=[],o=0;o<e.length;o++){var s=e[o],c=t.base?s[0]+t.base:s[0],l=n[c]||0,u="".concat(c," ").concat(l);n[c]=l+1;var d=a(u),f={css:s[1],media:s[2],sourceMap:s[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:u,updater:h(f,t),references:1}),r.push(u)}return r}function c(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=n.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var l,u=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function d(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=u(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function f(e,t,n){var r=n.css,o=n.media,i=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var p=null,v=0;function h(e,t){var n,r,o;if(t.singleton){var i=v++;n=p||(p=c(t)),r=d.bind(null,n,i,!1),o=d.bind(null,n,i,!0)}else n=c(t),r=f.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=(void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r));var n=s(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=a(n[r]);i[o].references--}for(var c=s(e,t),l=0;l<n.length;l++){var u=a(n[l]);0===i[u].references&&(i[u].updater(),i.splice(u,1))}n=c}}}}},o={};function i(e){if(o[e])return o[e].exports;var t=o[e]={id:e,exports:{}};return r[e](t,t.exports,i),t.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e=i(379),t=i.n(e),n=i(756),t()(n.Z,{insert:"head",singleton:!1}),n.Z.locals,console.log([{type:"title",value:"Test title",options:{}},{type:"text",value:"Lorem ipsum dolor sit, amet consectetur adipisicing elit.",options:{}},{type:"textColumns",value:["text 1","text 2","text 3"],options:{}}])})();

src/index.html

@@ -16,54 +16,7 @@
       <div id="panel" class="bg-light sidebar">
         <p>Sidebar text</p>
       </div>
-      <div id="site" class="content">
+      <div id="site" class="content"></div>
-        <div class="row">
-          <div class="col-sm">
-            <h1>Title</h1>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm">
-            <p>
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
-              consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
-              fugit eaque asperiores eligendi accusantium ratione exercitationem
-              delectus eveniet unde rerum, possimus voluptate!
-            </p>
-          </div>
-        </div>
-            
-          <div class="row">
-            <div class="col-sm">
-              <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                Incidunt consectetur reprehenderit ex blanditiis assumenda
-                quaerat ea atque fugit eaque asperiores eligendi accusantium
-                ratione exercitationem delectus eveniet unde rerum, possimus
-                voluptate!
-              </p>
-            </div>
-            <div class="col-sm">
-              <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                Incidunt consectetur reprehenderit ex blanditiis assumenda
-                quaerat ea atque fugit eaque asperiores eligendi accusantium
-                ratione exercitationem delectus eveniet unde rerum, possimus
-                voluptate!
-              </p>
-            </div>
-            <div class="col-sm">
-              <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                Incidunt consectetur reprehenderit ex blanditiis assumenda
-                quaerat ea atque fugit eaque asperiores eligendi accusantium
-                ratione exercitationem delectus eveniet unde rerum, possimus
-                voluptate!
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </body>
 </html>

src/index.js

@@ -1 +1,68 @@
 import './styles/main.css'
+import { model } from './model.js'
+
+console.log(model)
+
+let generateHTML = (model) => {
+  let htmlBlock
+  return model
+    .map((block) => {
+      switch (block.type) {
+        case 'title':
+          htmlBlock = convertModelToTitle(block.value)
+          break
+        case 'text':
+          htmlBlock = convertModelToText(block.value)
+          break
+        case 'textColumns':
+          htmlBlock = convertModelToColumns(block.value)
+          break
+        default:
+          htmlBlock = `<br>`
+          break
+      }
+      return htmlBlock
+    })
+    .join('')
+}
+
+let convertModelToTitle = (value) => {
+  return `
+    <div class="row">
+      <div class="col-sm">
+        <h1>${value}</h1>
+      </div>
+    </div>`
+}
+
+let convertModelToText = (value) => {
+  return `
+    <div class="row">
+      <div class="col-sm">
+        <p>
+          ${value}
+        </p>
+      </div>
+    </div>`
+}
+
+let convertModelToColumns = (value) => {
+  let columns = value
+    .map((item) => {
+      return `
+      <div class="col-sm">
+        <p>
+          ${item}
+        </p>
+      </div>`
+    })
+    .join('')
+  return `
+    <div class="row">
+      ${columns}
+    </div>`
+}
+
+document
+  .querySelector('#site')
+  .insertAdjacentHTML('beforeend', generateHTML(model))

src/model.js

@@ -0,0 +1,30 @@
+export const model = [
+  {
+    type: 'title',
+    value: 'Test title',
+    options: {}
+  },
+  {
+    type: 'text',
+    value: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
+    options: {}
+  },
+  {
+    type: 'textColumns',
+    value: [
+      `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
+      consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
+      fugit eaque asperiores eligendi accusantium ratione exercitationem
+      delectus eveniet unde rerum, possimus voluptate!`,
+      `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
+      consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
+      fugit eaque asperiores eligendi accusantium ratione exercitationem
+      delectus eveniet unde rerum, possimus voluptate!`,
+      `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
+      consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
+      fugit eaque asperiores eligendi accusantium ratione exercitationem
+      delectus eveniet unde rerum, possimus voluptate!`
+    ],
+    options: {}
+  }
+]

src/styles/main.css

@@ -20,3 +20,7 @@
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
   overflow-y: auto;
 }
+
+div {
+  padding: 10px;
+}