JavaScript Frameworks

A list of all the Progressive Web Application frameworks supported by the Form.io platform.

JavaScript

At its core, the Form.io platform uses a plain JavaScript (aka Vanilla JavaScript) renderer to render the forms within an application. This renderer, as well as all documentation can be found on Github @ https://github.com/formio/formio.js. For the full documentation, please take a look at Form Renderer Documentation in the help guides.

This renderer is able to easily render a form using the following code within your application either via Script embedding or application embedding.

Script Embedding

This allows the embedding of a form directly within an HTML application using the script tags within the header. The scripts and CSS that need to be included are as follows.

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
<script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
<div id='formio'></div>
<script type='text/javascript'>
Formio.createForm(
document.getElementById('formio'),
'https://examples.form.io/example'
);
</script>

The Form Builder can also be embedded using the following code.

<div id="builder"></div>
<script type="text/javascript">
Formio.builder(document.getElementById('builder'), {}, {});
</script>

Application Embedding

The form renderer can also be embedded within an application by first including the formiojs renderer as an NPM dependency and then using the following code.

npm install formiojs
import { Formio } from 'formiojs';
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');

And the following CSS should also be included in your application SASS file.

@import "~formiojs/dist/formio.form.min.css";

For more documentation on the JavaScript renderer, please check out the following links.

Angular

The Angular framework is a very popular PWA framework offered by Google. The Form.io integration libraries provide a simple wrapper around the JavaScript renderer library, but expose a number of helper components and modules that enable rapid application development within the Angular framework.

Angular Renderer

To use this within your application, you will start by importing the dependencies via NPM.

npm install --save formiojs @formio/angular

Once the library is imported into your Angular application, you can render a form using the following code.

import { FormioModule } from '@formio/angular';
@NgModule({
imports: [
...,
FormioModule
],
...
})
export class AppModule { }

And then the following can be used within your templates to render a form.

<formio src='https://examples.form.io/example'></formio>

There are many other modules and helper components within the Angular library, so we recommend checking out the list of other documentation and examples at the following links.

Angular Starter Application

Angular Demo Application

Angular Other Resources

React

The React is a popular JavaScript library for building PWA applications. It is maintained by Facebook. The Form.io integration libraries provide a simple wrapper around the JavaScript renderer library, but expose a number of helper components and modules that enable rapid application development within the React.

React Renderer

To use this within your application, you will start by importing the dependencies via NPM.

npm install --save formiojs @formio/react

Once the library is imported into your React application, you can render a form using the following code.

import React from 'react';
import { Form } from 'react-formio';
const App = () => (
<div className="container" id="main">
<Form src="https://examples.form.io/example" />
</div>
);

Form components provides a lot of helpful properties which allow you to configure your form. Here are the most common of them.

Property

Description

Value example

src

Anembed URL to load a form

https://examples.form.io/example

form

Form JSON schema, can be used instead of the src

{

type: 'form', display: 'form',

components: [...],

}

submission

Submission to set when the form is loaded

{ data: {...}, state: 'submitted', }

options

Form options

{ readOnly: true, noAlerts: false, saveDraft: false, }

formReady

A hook which will be called once the form instance is created and ready for use. Use this to take more control over the form.

(formInstance) => {

formRef.current = formInstance; }

formioform

You can pass a custom Form class using this prop

on${formioEventKey}

Use this template to subscribe to any event exposed by formio.

If you need to take more control of the the wrapped formio Form instance (e.g, conditionally prepopulate it with some data, or control the behavior of few components inside the form), you can use formReady prop and save form instance using React Ref.

import React from 'react';
import { Form } from 'react-formio';
const App = () => {
const formRef = React.useRef(null);
const onFormReady = React.useCallback((form) => {
formRef.current = form;
}, []);
return (
<div className="container" id="main">
<Form src="https://examples.form.io/example" />
</div>
);
};

There are many other modules and helper components within the React library, so we recommend checking out the list of other documentation and examples at the following links.

React Starter Application

Vue

The Form.io Vue renderer allows integration with the popular Vue.js framework.

Vue Renderer

Vue Starter Application

Aurelia

The Form.io Aurelia renderer allows integration with the Aurelia Framework.

Aurelia Renderer

Aurelia Starter Application

AngularJS

The AngularJS renderer is used to support the original Angular JS framework.

AngularJS Renderer

AngularJS Form Builder

AngularJS Helper Libraries

AngularJS Submission Grid

AngularJS Application Starterkit

Angular Material