VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <div id="formio"></div>
  </div>
</div>

JavaScript

const formJson = {
  "components": [{
      "label": "Expenses",
      "reorder": false,
      "addAnotherPosition": "bottom",
      "layoutFixed": false,
      "enableRowGroups": false,
      "initEmpty": false,
      "tableView": false,
      "defaultValue": [{}],
      "key": "expenses",
      "type": "datagrid",
      "input": true,
      "components": [{
        "label": "Amount",
        "mask": false,
        "spellcheck": true,
        "tableView": false,
        "currency": "USD",
        "inputFormat": "plain",
        "truncateMultipleSpaces": false,
        "key": "amount",
        "type": "currency",
        "input": true,
        "delimiter": true
      }]
    },
    {
      "label": "Columns",
      "columns": [{
          "components": [],
          "width": 3,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "size": "md",
          "currentWidth": 3
        },
        {
          "components": [],
          "width": 3,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "size": "md",
          "currentWidth": 3
        },
        {
          "components": [{
            "label": "HTML",
            "tag": "h3",
            "className": "pull-right",
            "attrs": [{
              "attr": "",
              "value": ""
            }],
            "content": "Total:",
            "refreshOnChange": false,
            "key": "html",
            "type": "htmlelement",
            "input": false,
            "tableView": false
          }],
          "size": "md",
          "width": 3,
          "offset": 0,
          "push": 0,
          "pull": 0,
          "currentWidth": 3
        },
        {
          "components": [{
            "label": "Total",
            "hideLabel": true,
            "mask": false,
            "spellcheck": true,
            "disabled": true,
            "tableView": false,
            "currency": "USD",
            "inputFormat": "plain",
           ...