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 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: <inline-code>AutoForm<inline-code>, <inline-code>AutoTable<inline-code>, and <inline-code>AutoButton<inline-code>.

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

<inline-code>AutoButton<inline-code> 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.

<inline-code>AutoTable<inline-code> 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 <inline-code>AutoForm<inline-code> 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 <inline-code>AutoForm<inline-code> while Gadget handles the rest.

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

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 <inline-code>AutoForm<inline-code> can be customized for the same creation of <inline-code>product<inline-code> model records used earlier:

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.

Here is an example of a default validation error:

AutoTable

When you generate a new table using <inline-code>AutoTable<inline-code>, 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:

You can extend <inline-code>AutoTable<inline-code> to show certain fields as columns in your table, or reorder them:

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:

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

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

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.

Building with AutoButton

<inline-code>AutoButton<inline-code> 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 <inline-code>AutoButton<inline-code>.

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 <inline-code>useActionForm<inline-code> 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 full-stack, 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 <inline-code>AutoForm<inline-code>, <inline-code>AutoButton<inline-code>, and <inline-code>AutoTable<inline-code>, check out our docs. If you want to learn more about autocomponents, share feedback, or request support for other design systems, you can join our developer Discord.