JavaScript Frameworks

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.
1
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
2
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
3
<script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
4
<div id='formio'></div>
5
<script type='text/javascript'>
6
  Formio.createForm(
7
    document.getElementById('formio'), 
8
    'https://examples.form.io/example'
9
  );
10
</script>
Copied!
The Form Builder can also be embedded using the following code.
1
<div id="builder"></div>
2
<script type="text/javascript">
3
  Formio.builder(document.getElementById('builder'), {}, {});
4
</script>
Copied!
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.
1
npm install formiojs
Copied!
1
import { Formio } from 'formiojs';
2
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
Copied!
And the following CSS should also be included in your application SASS file.
1
@import "~formiojs/dist/formio.form.min.css";
Copied!
For more documentation on the JavaScript renderer, please check out the following links.
​Form.io Github Page​
​Wiki Documentation​
​Examples and Additional Documentation​
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
GitHub - formio/angular: JSON powered forms for Angular
GitHub
To use this within your application, you will start by importing the dependencies via NPM.
1
npm install --save formiojs @formio/angular
Copied!
Once the library is imported into your Angular application, you can render a form using the following code.
1
import { FormioModule } from '@formio/angular';
2
@NgModule({
3
    imports: [
4
        ...,
5
        FormioModule
6
    ],
7
    ...
8
})
9
export class AppModule { }
Copied!
And then the following can be used within your templates to render a form.
1
<formio src='https://examples.form.io/example'></formio>
Copied!
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
GitHub - formio/angular-app-starterkit: Angular 7 + Bootstrap 4 application starter kit using Form.io
GitHub
Angular Demo Application
GitHub - formio/angular-demo: A Demo application with Angular 8 + Form.io
GitHub
Angular Other Resources
​Angular Library Github Homepage​
​Wiki Documentation​
​Example/Starter Application​
​Starter Application Source Code​
​Walkthrough Video (using Angular 5)​
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
GitHub - formio/react: JSON powered forms for React.js
GitHub
To use this within your application, you will start by importing the dependencies via NPM.
1
npm install --save formiojs @formio/react
Copied!
Once the library is imported into your React application, you can render a form using the following code.
1
import React from 'react';
2
import { Form } from '@formio/react';
3
​
4
const App = () => (
5
  <div className="container" id="main">
6
    <Form src="https://examples.form.io/example" />
7
  </div>
8
);
Copied!
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.
1
import React from 'react';
2
import { Form } from '@formio/react';
3
​
4
const App = () => {
5
  const formRef = React.useRef(null);
6
  const onFormReady = React.useCallback((form) => {
7
    formRef.current = form;
8
  }, []);
9
​
10
  return (
11
    <div className="container" id="main">
12
      <Form src="https://examples.form.io/example" />
13
    </div>
14
  );
15
};
Copied!
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
GitHub - formio/react-app-starterkit: A react starterkit for creating new web applications with Form.io
GitHub
Vue
The Form.io Vue renderer allows integration with the popular Vue.js framework.
Vue Renderer
GitHub - formio/vue-formio: Javascript Powered forms and JSON form builder for Vue.js
GitHub
Vue Starter Application
GitHub - formio/vue-app-starterkit: Starterkit for building apps with form.io and vue
GitHub
Aurelia
The Form.io Aurelia renderer allows integration with the Aurelia Framework.​
Aurelia Renderer
GitHub - formio/aurelia-formio: Form.io JSON Forms and Form Builder for Aurelia
GitHub
Aurelia Starter Application
GitHub - formio/aurelia-app-starterkit
GitHub
AngularJS
The AngularJS renderer is used to support the original Angular JS framework.
AngularJS Renderer
This library is meant to be used in conjunction with Form.io to provide dynamic JSON form rendering capabilities. This allows you to render any form using the schemas provided by Form.io.
GitHub - formio/ngFormio: JSON powered form rendering library for AngularJS + Form.io.
GitHub
The following snippit of code will dynamically render the form within Form.io, as well as automatically hook that form up to the REST API generated from the same schema.
1
<formio src="'https://myapp.form.io/myform'"></formio>
Copied!
Installation
There are several ways to add this library to your application. Each of these installation types are for specific use cases.
Full Installation
Includes: Everything including Angular.js and jQuery.
Usage: Use this installation if your application does not already have Angular and jQuery and you wish to display a single form on a page.
Installation: Place the following within your application.
1
<link rel="stylesheet" href="https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.css" />
2
<script src="https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.js"></script>
Copied!
Complete Installation
Includes: Everything except Angular.js and jQuery
Usage: Use this if you are embedding a form within an application that already has Angular.js and jQuery installed.
Installation: Place the following within your application.
1
<link rel="stylesheet" href="https://rawgit.com/formio/ngFormio/master/dist/formio-complete.min.css" />
2
<script src="https://rawgit.com/formio/ngFormio/master/dist/formio-complete.min.js"></script>
Copied!
Basic Installation: (Bower Installation)
Includes: Only the ngFormio renderer library with no dependencies.
Usage: When you wish to explicitely include all of the dependencies like when you are using Wiredep.
Installation: We recommend using Wiredep for the Basic installation since it will wire up all the dependencies for you. You just need to place the following within your application.
First install the dependency using Bower
1
bower install --save ng-formio
Copied!
Then, you can add the following to your application.
1
<html>
2
<head>
3
  <!-- bower:css -->
4
  <!-- endbower -->
5
</head>
6
<body>
7
  <!-- bower:js -->
8
  <!-- endbower -->
9
</body>
10
</html>
Copied!
Then run Wiredep to wire it up.
1
$ node
2
> require('wiredep')({ src: 'index.html' });
Copied!
We also recommend using this within a Gulp build process using Wiredep in combination with Gulp UseRef.
Usage
Now that you have the library installed, you can then do the following to add a form to your application.
Create an account on https://form.io​
Create a new project.
Create a Form within your project. This will then give you an API url like the following. https://myapp.form.io/myform.
You can then embed this form within your application by providing the following.
<formio src="'https://myapp.form.io/myform'"></formio>
This not only renders the form dyanmically within your application, but also automatically hooks up that form to the API backend that is provided from Form.io.
AngularJS Form Builder
GitHub - formio/ngFormBuilder: The Form.IO Form Builder Application
GitHub
AngularJS Helper Libraries
GitHub - formio/ngFormioHelper: A library to help build Angluar.js applications on top of Form.io.
GitHub
AngularJS Submission Grid
GitHub - formio/ngFormioGrid: Provides a way to display Form.io submission data within the Angular UI-Grid.
GitHub
AngularJS Application Starterkit
GitHub - formio/ng-app-starterkit: An angular 1.x starterkit for creating new web applications with Form.io
GitHub
Angular Material
This library introduces the powerful Form.io JSON forms into the Angular Material framework.
GitHub - formio/angular-material: JSON powered forms for Angular Material
GitHub
Installation
To install this library into your application, you will need to run the following.
1
npm install formiojs @formio/angular @formio/angular-material
Copied!
Then, you will need to add the following to your codebase.
1
import { MatFormioModule } from '@formio/angular-material';
2
​
3
@NgModule({
4
  declarations: [
5
    AppComponent
6
  ],
7
  imports: [
8
    BrowserModule,
9
    BrowserAnimationsModule,
10
    MatFormioModule
11
  ],
12
  providers: [],
13
  bootstrap: [AppComponent]
14
})
15
export class AppModule { }
Copied!
Using this library
This library can be used to render dynamic JSON powered forms within any Angular Material application. This uses the exact same syntax as the <formio> component within the Angular Form.io Library. The only difference is that you will use the <mat-formio> directive instead.
For example, the following will render a dynamic JSON form within your application.
1
<mat-formio src="https://examples.form.io/kitchensink"></mat-formio>
Copied!
You can also use this to render JSON forms as follows.
1
<mat-formio [form]="{
2
  components: [
3
    {
4
      type: 'textfield',
5
      label: 'First Name',
6
      key: 'firstName'
7
    },
8
    {
9
      type: 'textfield',
10
      label: 'Last Name',
11
      key: 'lastName'
12
    },
13
    {
14
      type: 'button',
15
      action: 'submit',
16
      label: 'Submit',
17
      key: 'submit'
18
    }
19
  ]
20
}" (submit)="onSubmit($event)"></mat-formio>
Copied!
Developer Guide - Previous
Fetch Plugin API
Next - Developer Guide
CSS Frameworks
Last modified 5mo ago