# 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**](https://github.com/formio/formio.js). For the full documentation, please take a look at [**Form Renderer Documentation**](/developers/form-development/form-renderer.md) 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.

{% hint style="info" %}
Navigate to the following link for more information about the [**Form.io CDNs**](https://help.form.io/developers/javascript-development/pages/-MPf1G2oCDXE3rVEopO8#what-are-the-form.io-cdns)
{% endhint %}

<pre class="language-html"><code class="lang-html"><strong>&#x3C;html>
</strong><strong>  &#x3C;head>
</strong>    &#x3C;meta charset="utf-8">
    &#x3C;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    &#x3C;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
    &#x3C;script src="https://cdn.form.io/js/formio.embed.js">&#x3C;/script>
  &#x3C;/head>
  &#x3C;body>
    &#x3C;div id='formio'>&#x3C;/div>
    &#x3C;script type='text/javascript'>
      Formio.createForm(
        document.getElementById('formio'), 
        'https://examples.form.io/example'
      );
    &#x3C;/script>
  &#x3C;/body>
&#x3C;/html>
</code></pre>

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

<pre class="language-html"><code class="lang-html">&#x3C;html>
  &#x3C;head>
    &#x3C;meta charset="utf-8">
<strong>    &#x3C;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</strong><strong>    &#x3C;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
</strong>    &#x3C;link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css">
    &#x3C;script src="https://cdn.form.io/js/formio.full.min.js">&#x3C;/script>
  &#x3C;/head>
  &#x3C;body>
<strong>    &#x3C;div id="builder">&#x3C;/div>
</strong>    &#x3C;script type="text/javascript">
      Formio.builder(document.getElementById('builder'), {}, {});
    &#x3C;/script>
  &#x3C;/body>
&#x3C;/html>
</code></pre>

### 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.

```bash
npm install @formio/js
```

```javascript
import { Formio } from '@formio/js';
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
```

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

```javascript
@import '@formio/js/dist/formio.form.min.css';
```

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

* [Form.io Github Page](https://github.com/formio/formio.js)
* [Wiki Documentation](https://github.com/formio/formio.js/wiki)
* [Examples and Additional Documentation](https://formio.github.io/formio.js/)

## Angular

The [**Angular**](https://angular.io/) 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

{% embed url="<https://github.com/formio/angular>" %}

[**Compatibility Version Matrix** ](https://github.com/formio/angular?tab=readme-ov-file#angular-versions)

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

```bash
npm install --save @formio/js @formio/angular
```

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

```javascript
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.

```javascript
<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 Demo Application

{% embed url="<https://github.com/formio/angular-demo>" %}

### Angular Other Resources

* [**Angular Library Github Homepage**](https://github.com/formio/angular)
* [**Wiki Documentation**](https://github.com/formio/angular/wiki)
* [**Example/Starter Application**](https://formio.github.io/angular-demo/#/)
* [**Starter Application Source Code**](https://github.com/formio/angular-demo)
* [**Walkthrough Video (using Angular 5)**](https://www.youtube.com/watch?v=zEvzW_sSXk0)

## React

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 React.

### React Renderer

{% embed url="<https://github.com/formio/react>" %}

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

```bash
npm install --save @formio/js @formio/react
```

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

```javascript
import { createRoot } from 'react-dom/client';
import { useEffect, useState } from 'react';
import {
	useFormioContext,
	FormioProvider,
	FormType,
	Form,
} from '@formio/react';

const FormsByUser = ({ userId }: { userId: string }) => {
	const { Formio, projectUrl } = useFormioContext();
	const [forms, setForms] = useState<FormType[]>([]);
	useEffect(() => {
		const fetchForms = async () => {
			const formio = new Formio(projectUrl);
			try {
				const forms = await formio.loadForms({
					params: { type: 'form', owner: userId },
				});
				setForms(forms);
			} catch (err) {
				console.log(
					`Error while loading forms for user ${userId}:`,
					err,
				);
			}
		};
		fetchForms();
	}, [Formio, projectUrl, userId]);
	return forms.map(function (form) {
		return (
			<>
				<Form src={form} />
				<div style={{ marginBottom: '10px' }} />
			</>
		);
	});
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);
const root = createRoot();
root.render(
	<FormioProvider projectUrl="https://examples.form.io">
		<App />
	</FormioProvider>,
);
```

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

{% embed url="<https://github.com/formio/react-app-starterkit>" %}

### React Components vs Form.io Components

React and Form.io both use the word "components" to refer to discreet modules of reusable code, but they are distinctly different and the difference must be understood.

In React, components are UI building blocks that render elements on the page, while in Form.io, components are data-driven form elements that power dynamic forms, workflows, and APIs.  Form.io components are not just the data field UI, they define data structures, validation, and API interactions, to create a fully integrated form and data management system.

### React Wrapper

Form.io provides a React wrapper that makes embedding forms in a React application completely seamless. Developers should not try to import custom React components directly into Form.io forms. Instead, use the React wrapper to integrate the rendered forms seamlessly alongside any other React component. This allows for tight integration with React’s state management, event handling, and styling, while still benefiting from the Form.io Platform's schema-driven approach.

#### Integrating forms with the React wrapper

Rather than treating the Form.io Platform as an isolated system, the React wrapper integrates a React app and the Form.io form engine.\
Forms may trigger React state updates, listen to events, and interact with other components in the app without breaking the schema-driven approach of Form.io

This ensures:

* **Separation of concerns:** Control of the broader application’s UI is handled entirely by React, while the the form’s behavior is handled entirely with the Form.io Platform.
* **Scalability:** The app remains scalable without needing to modify form components at the code level.
* **Flexibility:** The Form.io Platform's JSON-driven forms stay flexible and dynamic while still aligning with the application’s design system.

## Vue

The Form.io Vue renderer allows integration with the popular [**Vue.js framework**](https://vuejs.org/).

### Vue Renderer

{% embed url="<https://github.com/formio/vue>" %}

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

```bash
npm install --save @formio/js @formio/vue
```

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

```html
<template>
  <formio :src="formUrl" @submit="onSubmitMethod" />
</template>
<script>
import { Form } from '@formio/vue';

export default {
  data: function() {
    // Load these from vuex or some other state store system.
    return {
      formUrl: "https://examples.form.io/example"
    }
  },
  components: {
    formio: Form
  },
  methods: {
    onSubmitMethod: function(submission) {
      console.log(submission);
    }
  }
};
</script>
```

Form components provide many helpful properties which allow you to configure your form. Here are the most common of them.

| Property   | Description                                      | Value example                                                                            |
| ---------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| src        | An embed URL to load a form                      | [**https://examples.form.io/example**](https://examples.form.io/example)                 |
| form       | Form JSON schema, can be used instead of the src | <p>{</p><p>  type: 'form',<br>  display: 'form',</p><p>  components: \[...],</p><p>}</p> |
| submission | Submission to set when the form is loaded        | <p>{<br>   data: {...},<br>   state: 'submitted',<br>}</p>                               |
| options    | Form options                                     | <p>{<br>  readOnly: true,<br>  noAlerts: false,<br>  saveDraft: false,<br>}</p>          |

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

### Vue Starter Application

{% embed url="<https://github.com/formio/vue-app-starterkit>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.form.io/developers/javascript-development/frameworks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.