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. 

<Callout warning>

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

</Callout>

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

<BlockSwitcher>

<Block name="Default form">

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

![Studio console showing auto-generated forms on the left-hand navigation bar](/images/console/formbuilder/overview1.png)

Default forms can be identified by the Amplify icon next to the form name

![Form name showing the Amplify icon, indicating it is a default form](/images/console/formbuilder/defaultform.png)

<Callout info>

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

</Callout>

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

</Block>

<Block name="New connected form">

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**
![Red box around the "new" section of Form Builder](/images/console/formbuilder/overview7.png)
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**

![Create new form screen with the Publisher data model highlighted in the Data model section](/images/console/formbuilder/connectedform.png)

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

</Block>

<Block name="New JSON form">

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** 
![Red box around the "new" section of Form Builder](/images/console/formbuilder/overview7.png)
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:

![Form rendered from JSON showing headings and fields with types inferred from key pair values](/images/console/formbuilder/overview6.png)

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

</Block>

<Block name="New blank form">

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**
![Red box around the "new" section of Form Builder](/images/console/formbuilder/overview7.png)
1. Give your form a name, and select [Create or Update](#create-and-update-forms)
1. Leave **Black form** selected, and click **Create form**

![New form page, showing the options available when creating a new form](/images/console/formbuilder/overview2.png)

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. 

![Image of the Form Creation page with the blue bar and plus sign indicating the ability to add input elements to the form](/images/console/formbuilder/overview3.png)

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

</Block>

</BlockSwitcher>

<Callout info>

Alternatively, to get started without logging into AWS, [you can build unconnected forms in the Amplify Sandbox](https://sandbox.amplifyapp.com/ui-library). 

</Callout>

## 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 `<App />` component with the following:

```jsx
<ThemeProvider theme={studioTheme}>
    <App />
</ThemeProvider>
```

### 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 (
    <ProductCreateForm />
  )
}

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. 
