export const meta = {
  title: "Amplify Studio",
  description:
    "Amplify Studio is a visual development environment for building a fullstack app.",
  disableTOC: "true",
};

AWS Amplify Studio is a visual development environment for building fullstack web and mobile apps. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to accelerate your UI development as well. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.

<InternalLinkButton href="/console/tutorial/buildui">
  <span slot="text">Tutorial</span>
</InternalLinkButton>

## Key capabilities

### Visual backend builder - works with Amplify CLI
Build a well-architected app backend using our visual backend builder. All backend definitions are deployed following infrastructure-as-code best practices.
- Use the data model designer to easily provision a GraphQL API with database tables.
- Set up authentication with social providers and then define authorization rules to protect your data.
- Set up file storage to easily upload/download files from your app.
- Write Lambda functions to execute custom business logic.

Amplify Studio generated backends can be accessed using the Amplify CLI by running the `amplify pull` command.

![GIF showing data modeling](/images/console/datamodel.gif)

### Accelerated UI development and Figma to React code
To accelerate UI development, Amplify Studio uses the [Amplify UI library](https://ui.docs.amplify.aws/) to offer dozens of components such as news feeds, contact forms, and e-commerce cards and primitives such as buttons, text areas, and alerts. All UI components are fully customizable within Figma, giving designers complete control over the visual styling of components within tooling they are familiar with. All Figma components are imported into Studio as React components that are as good as hand-authored code.

![Screenshot showing Figma to Code](/images/console/ui-figmatocode.png)

### Bind UI to data
Developers can use the component editor to visually connect the UI components to data from the app backend. Define component and child properties, create collections from a component, and shuffle preview data from the CMS.

![Screenshot showing UI to data binding](/images/console/ui-front-to-back.png)

### App backend management

Manage your app backend data, files, and users/groups in Amplify Studio. The data browser provides a lightweight headless CMS to access/update data in your backend databases. 

![Screenshot showing Amplify Studio's data manager](/images/console/studio-manage.png)


### No AWS account needed

Quickly give access to your teammates to manage the Amplify Studio environments. Choose between full access and manage-only access.

![Screenshot showing how to configure external access to Amplify Studio](/images/console/access.png)