Introducing autocomponents: Instantly generate beautiful React UIs that come connected to your API

TL;DR: Instantly generate extensible React components that come connected to your Gadget API with just one line of code.‍

Starting today, developers can automatically generate fully-functional forms and tables in seconds that can read and write data to your Gadget database. With just one line of code, you can render complex frontend components that use Polaris, with the ability to extend and customize everything exactly to your needs.

Autocomponents let you build and launch beautiful frontends faster than ever, by instantly creating interactive UIs for the most common components in a B2B app. In seconds, you can see your components and run them on our hosted frontends, and get a true sense of how they behave in production so you know exactly what the end user experience is like. You’ll spend much less time building and debugging common components, and more time on the code that matters most for your app.

Currently, there are three autocomponents you can build with: AutoForm, AutoTable, and AutoButton.

AutoForm instantly generates extensible, fully-functional forms for your Gadget actions with a single line of code.

AutoButton lets you easily call any of your backend API actions, along with the required variables passed as a prop. When clicked, your button will run an action, and show a success or error once complete, with a loading spinner displayed while the action is running.

AutoTable automatically generates feature-rich Polaris tables with search, sorting, and even pagination included from the moment your table is created.

Instant, extensible, and boilerplate-free

Autocomponents all come ready to customize and extend. We give you access to all the underlying Polaris components, so you can adjust the layout or properties of your forms and tables to your needs.

AutoForm

By default, Gadget renders AutoForm with the fields and field types defined within your models. It comes with built-in support for complex field types, like rich text and file uploads, model relationships, and even custom action parameters that sit outside of your data model. Instead of writing hundreds of lines of code to handle file storage or actions in your form, all you have to do is build your model and call AutoForm — Gadget handles the rest.

For example, here’s how you could render a form to handle creation of new product model records:

<AutoForm action={api.product.create} />

If you prefer to have fields displayed differently from what you’ve defined in your models, you can customize your form to use whatever field types you want.

Another way to extend forms would be to change the layout. Here’s an example of of how the layout of AutoForm can be customized for the same creation of product model records used earlier:

import { AutoForm, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";
import { Card, InlineStack, Text, Divider } from "@shopify/polaris"


export default function () {
 return (
   <Card>
     <AutoForm action={api.product.create}>
       <Text variant="heading2xl" as="h3">
         Add a new product
       </Text>
       <InlineStack gap="200">
         <AutoInput field="title" />
         <AutoInput field="weight" />
       </InlineStack>
       <AutoInput field="image" />
       <Divider />
       <AutoSubmit />
     </AutoForm>
   </Card >
 );
}

Regardless of how you make changes to your forms, validations that you specify on an action’s fields or parameters will be enforced when that action is run. In the event that there are any validation errors, the form will automatically display the appropriate validations to your app’s users in accordance with Polaris style guides. You also have the option to set up custom validations as needed.

AutoTable

When you generate a new table using AutoTable, Gadget will render your table with up to 10 columns, depending on the number fields included in your model.

For example, a table to display products from a store may look like:

<AutoTable model={api.product} />

You can extend AutoTable to show certain fields as columns in your table, or reorder them:

<AutoTable model={api.product} columns={["title", "draft", "image"]} />

You can fetch relationships, and display them within your table. For example, if you wanted to display a table of products along with any variants, you could do that with the following code:

<AutoTable live model={api.product} columns={["title", "draft", "image", "variants"]} />

AutoTable also gives you the ability to run certain actions, like delete or bulk delete, within the table view itself.

You can even include any custom actions in your AutoTable. For example, we can add an export action to our table with the following code:

    <AutoTable model={api.product} actions={[
       {
         label: "Export",
         action: async (records) => {
        // call a global export action
        const ids = records.map(product => product.id);
           await api.export(ids);
         },
       },
     ]} />

And if you still need to refine your table further, customizable cell rendering allows you to show the data you want, exactly the way you want it. Whether it’s a button, icon, slider, image, or anything else you can think of, you can include it with just a few lines of code.

     <AutoTable model={api.product} columns={[
       "title",
       {
         header: "Draft",
         render: ({ record }) => {
           if (record.draft) {
             return <img height="40px" src={cat} />
           }
           else return <img height="40px" src={ogre} />
         },
       },
       "image"]}
     />

Building with AutoButton

AutoButton is best for when you have a simple task or single action that needs to be executed. For example, if you have a list of keywords for your products in Shopify, you may want to remove specific keywords from the list. A button to run a delete action for specific keywords could be rendered using AutoButton.

<AutoButton action={api.product.delete} variables={{ id: 1 }} />

All autocomponents are rendered using Polaris, with new design systems like MUI coming soon.

If Polaris isn’t your style, or you want maximum fidelity and control over your designs, we’ve got you covered. We provide headless React hooks that allow you to take over and build your own UX, while still benefiting from the automated state management and API calls. You can find more details on building with React hooks in our useActionForm docs.

Autocomponents is a true game changer. I don't deal with connecting to my API, writing validations, or managing a bunch of code. Same with tables. I just call my model and Gadget does the rest, so I have more time to play tennis.
— Tanmay Kejriwal, Founder at Shopvana

The magic of a single-stack platform

Normally when building your UI, you would need to manually wire up your frontend, api, and database; you’d read through docs, code up state management, set up component libraries, and deal with never-ending pagination headaches. Hours of work, just to render a simple table or form.

However, with Gadget’s context-aware, full-stack framework, you can avoid adding in all of the glue code and let the platform handle it for you. Gadget generates your API, so we know your actions and how to run them. Gadget powers your database, so we know everything about your records and how to best display them. Gadget is your frontend, so we can generate components for you. And because Gadget constantly updates and regenerates your API as you build, we can update those frontend components automatically as you make changes.

For more details on how to start building with AutoForm, AutoButton, and AutoTable, you can check out the Gadget docs. If you want to learn more about autocomponents, share feedback, or suggest new design systems, you get in touch with us through our developer Discord.