Form Builder

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 data binding to GraphQL APIs without Conflict Resolution. Learn more about GraphQL and Conflict Resolution here.

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

Log into your Studio application
Select UI Library on the left-hand navigation bar
Take one of the following paths:

If you have a data model deployed in your Amplify app, Studio will automatically generate default connected forms for you.

To use default forms:

Log into Amplify Studio and deploy a Data model
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

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

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.

Alternatively, to get started without logging into AWS, you can build unconnected forms in the Amplify Sandbox.

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 then,

Navigate to your application's root directory and install the following npm dependencies

1npm install -g @aws-amplify/cli

1npm install aws-amplify @aws-amplify/ui-react

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

1import '@aws-amplify/ui-react/styles.css';
2
3import { Amplify } from 'aws-amplify';
4import { ThemeProvider } from '@aws-amplify/ui-react';
5
6import amplifyconfig from './amplifyconfiguration.json';
7import studioTheme from './ui-components/studioTheme';
8
9Amplify.configure(awsconfig);

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:

1<ThemeProvider theme={studioTheme}>
2  <App />
3</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.

Navigate to your application's root directory and run amplify pull
Import your form by name. For a form named ProductCreateForm, you would use the following code:

1import { ProductCreateForm } from './ui-components';

Place your form in code. For a form named ProductCreateForm in a React project, you could use the following App code:

1function App() {
2  return <ProductCreateForm />;
3}
4
5export default App;