Build your first app
Learn the fundamentals of building with Toolpad by creating a small application.
This guide will walk you through the process of creating a small Toolpad application. You'll use the MUI X Data Grid component to display a list of dog breeds from the Dog API. When you click on the name of a breed, a random photo of the breed will be displayed using the Material UI Image component.
This guide is intended to introduce you to the fundamentals of building with Toolpad. By the end, you should be able to:
- set up a new Toolpad app
- navigate through your workspace
- design a page and connect its data
Make sure to install Node.js on your system.
Create a new application
npx create-toolpad-app dog-app
Start the development server
cd dog-app npm run dev
The Toolpad application editor opens automatically in your browser.
- Hover over the component library and drag a Data Grid component into the canvas. Now repeat the process and drag an Image component as well. When you're done, the canvas should look like this:
The Toolpad editor with components dragged
Click anywhere inside the canvas (except on the components that you just added) to deselect all components.
Locate the Add query button inside the inspector. Press it and choose HTTP request.
The Add query menu
- We'll be using the dog API for this tutorial. First give the query a unique name:
dogQuery. Then, set
https://dog.ceo/api/breeds/list/allas the URL. Click the Preview button to inspect the result of this request, and expand the
messageobject in the response. If all went well, it will look like this:
The dog API response
in the editor. Click Preview again to verify the result.
The dog API response transformed
Save the query and close the query editor. Next, we will bind this data to components on the page. Click the Data Grid component to select it.
Find the rows property in the inspector. Notice that there's a small Bind button to its right. Properties with this button next to them can be bound to state available on the page:
The bindable rows property
dogQueryavailable in the scope as a binding expression.
save the binding and close the binding editor.
The binding editor
- If all went well, the Data Grid will now display the data from our query:
The data grid with bound data
- Now, we can make this app interactive by displaying a random image of the selected breed. We'll create another query which reacts to the selection inside the Data Grid component. Deselect all components and click on Add query → HTTP request. Name it "imageQuery" and add a
breedparameter in the Parameters section on the bottom:
dataGrid.selection?. ?? 'akita';
This will use the selected value from the Data Grid, and default to the "akita" breed when no row has been selected.
Binding breed to the selected value
Save the binding and close the binding editor. Save the query and exit the query editor.
In the canvas select the Image component to view its properties in the inspector. Click on the Bind button next to the src prop to open the binding editor, and bind it to
Binding the Image src to the query response
- Try selecting different rows in the data grid to see the image update to a random image of the selected breed.
The image changing based on the selected row
- Click on the Preview button to see a preview of what your app will look like when deployed:
The preview of our application
- That's it! Feel free to browse through the rest of the documentation to know more about what you can do with Toolpad.