export const meta = {
title: `Overview`,
description: `Amplify Studio's Form Builder automatically generates cloud-connected forms as React code, either from your data model, any JSON object, or from scratch. You can configure validation logic, adjust theming, and customize presentation all within the console.`,
};
Amplify Studio's **Form Builder** is a visual interface for creating React forms. You can configure validation logic, adjust theming, and customize presentation all within the console.
Forms are fully extensible, allowing lifecycle management, and supporting custom validation logic in code, including calling an external API or validating against another database.
Form builder now supports **relationship fields** in your data models! Relationships will be created as [autocomplete fields](https://ui.docs.amplify.aws/react/components/autocomplete).
## Getting started
When you build a form with Form Builder, Amplify Studio generates a reusable React component based on your design. This component code can then be pulled into your project directory, imported, and rendered in your app with only a few lines of code.
To start with Form Builder in a Studio app...
1. [Log into your Studio application](/console/adminui/start/#logging-in-and-creating-an-app)
1. Select **UI Library** on the left-hand navigation bar
1. Take one of the following paths:
If you have a data model deployed in your Amplify app, Studio will automatically generate default [connected forms](/console/formbuilder/data-binding/#connected-forms) for you.
To use default forms:
1. Log into [Amplify Studio](/console/adminui/start/#logging-in-and-creating-an-app) and deploy a [Data model](/console/data/data-model/)
2. Navigate to the **Studio Console > UI Library**
Your forms will be listed on the left-hand navigation bar under the **Forms** header
Default forms can be identified by the Amplify icon next to the form name
**Missing a form?** If you have a deployed data model but have no forms, automatic form generation may be disabled. In the upper right-hand corner of the UI Library, select **UI Library settings**, and enable **Automatic form creation**.
Default forms can be used as-is, or they can be customized. To customize a default form, select the form in the left-hand navigation bar, and click **Configure** in the upper right-hand corner. If you change your mind, you can delete your form, and a new default form will be generated.
After you are satisfied with your form, you [can render it in your app](#render-react-form-in-your-app).
To use connected forms, you first need a data model. Log into [Amplify Studio](/console/adminui/start/#logging-in-and-creating-an-app) and deploy a [Data model](/console/data/data-model/).
To build a new connected form...
1. Select **UI Library**
1. In the **Forms** section of the left-hand nav bar, select **New**
1. Name your Form, and select [Create or Update](#create-and-update-forms)
1. In the **Data model** dropdown, select which model your form should connect to
1. Select **Create form**
Form builder will generate a new form with input fields that match the fields of the connected data model. From here, you can [customize your inputs](./customize), and after you are satisfied with your form, you [can render it in your app](#render-react-form-in-your-app).
Amplify Studio can generate an unconnected form based on the JSON object you'd like it to output. This is particularly useful if you are interfacing with another API - most API endpoints expect input data in JSON format, so you can quickly generate a form by pasting a sample payload.
To generate a form from JSON:
1. In [Amplify Studio Console](/console/adminui/start/#logging-in-and-creating-an-app), navigate to **UI Library**
1. In the left-hand nav bar, next to the **Forms** header, select **New**
1. Give your form a name, and select [Create or Update](#create-and-update-forms)
1. In the New Form page, select **JSON object**
1. Paste your JSON into the code editor and click **Create form**
Form Builder will infer the input element type based on the value and can handle arrays and nested JSON values. For example, use this JSON sample:
```json
{
"basics": {
"firstName": "Wesley",
"emailAddress": "wesley@example.com"
},
"favoriteThings": {
"animals": ["Cats", "Snakes", "Quokka"],
"month": "December",
"number": 17
},
"active": true,
"enabled": false
}
```
This JSON will render the following form:
From the JSON object, Amplify Studio can automatically...
- ...set the correct types for **Email address** and **Number**
- ...set **Animals** to receive multiple values
- ...set **Active** and **Enabled** to switches
When you are satisfied with this form, you can convert it to a connected form by [binding to a data model](#form-binding), or you [can render it in your app](#render-react-form-in-your-app).
Amplify Studio allows you to build unconnected forms completely from scratch with a visual interface. To generate a basic, brand-new form:
1. In the [Amplify Studio Console](/console/adminui/start/#logging-in-and-creating-an-app), navigate to **UI Library**
1. In the left-hand nav bar, next to the **Forms** header, select **New**
1. Give your form a name, and select [Create or Update](#create-and-update-forms)
1. Leave **Black form** selected, and click **Create form**
After clicking **Create form**, you will be directed to the Edit Form page. Select the **plus sign**, and select an input element to add to your form.
You can continue to customize your form inputs, and when you are satisfied, you can convert it to a connected form by [binding to a data model](#form-binding), or you [can render it in your app](#render-react-form-in-your-app).
Alternatively, to get started without logging into AWS, [you can build unconnected forms in the Amplify Sandbox](https://sandbox.amplifyapp.com/ui-library).
## Render React form in your app
### Initial Project Setup
To use a form in your application, you first need to configure your project to use Amplify Studio generated components. To get started, create a [new React App](/lib/project-setup/create-application/q/platform/js/#create-a-new-react-app) then,
1. Navigate to your application's root directory and install the following npm dependencies
```
npm install -g @aws-amplify/cli
```
```
npm install aws-amplify @aws-amplify/ui-react
```
2. In your application's entrypoint file (e.g. `src/index.js` for create-react-app or `src/main.jsx` for Vite), add the following imports and configuration
```jsx
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import {ThemeProvider} from "@aws-amplify/ui-react";
import awsconfig from './aws-exports';
import studioTheme from './ui-components/studioTheme';
Amplify.configure(awsconfig);
```
3. In your application's entrypoint file (e.g. `src/index.js` for create-react-app or `src/main.jsx` for Vite), wrap the `` component with the following:
```jsx
```
### Import and Render Your Form
Next, your forms need to be pulled from the Amplify cloud to your project, and imported into your code.
1. Navigate to your application's root directory and run `amplify pull`
2. Import your form by name. For a form named `ProductCreateForm`, you would use the following code:
```jsx
import {
ProductCreateForm
} from './ui-components';
```
3. Place your form in code. For a form named `ProductCreateForm` in a React project, you could use the following App code:
```jsx
function App() {
return (
)
}
export default App;
```
## Limitations
To build and use [connected forms](/console/formbuilder/data-binding/#connected-forms), your GraphQL API must be using **DataStore**. To activate DataStore, [select a Conflict Resolution strategy and deploy your API](/console/data/data-model/#datastore-and-graphql).
If you are not using DataStore, you can still build [unconnected forms](/console/formbuilder/data-binding/#unconnected-forms) in Studio or in the Amplify Sandbox.