VanillaJS Form.io Renderer

by Mike Cunneen

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">
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    <!-- Fonts to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <!-- Icons to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    <div id="root"></div>
    <script type="text/babel">
const {
  colors,
  CssBaseline,
  ThemeProvider,
  Container,
  makeStyles,
  createTheme,
  TextField
} = MaterialUI;

// Create a theme instance.
const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: colors.red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(6, 0, 3),
  },
  lightBulb: {
    verticalAlign: 'middle',
    marginRight: theme.spacing(1),
  },
}));


function App() {
	React.useEffect(()=>{

		// log the existing (bootstrap by default) templates
		console.log(Formio.Templates.current);
    console.log(Formio.core);
    
    // override a template for input
    Formio.Templates.current.input.form = (ctx) => {
//    	console.log(ctx);
    	return ("FOO!");
    };

  	// render the formIO
    Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example').then(function(form) {
    //...