Quickstart

Learn the fundamentals of building with Toolpad by creating and deploying a simple application.

This guide will walk you through the process of creating a basic Toolpad application. You'll use the MUI X DataGrid component to display a list of dog breeds from the Dog API. When you click on the name of a breed, its photo will be displayed using the Material UI Image component.

Purpose

This Quickstart 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
• add components, data sources, and queries to an app
• bind data sources and components
• deploy a Toolpad app

Prerequisites

This guide assumes that you have Docker installed on your machine.

Make sure you have a running Toolpad instance.

1. Download the docker compose file

   curl -LO https://raw.githubusercontent.com/mui/mui-toolpad/master/docker/compose/docker-compose.yml
   

   Copy (or $keyC)

2. Start the docker compose services

   docker-compose -f docker-compose.yml up -d
   

   Copy (or $keyC)

Toolpad will be accessible under http://localhost:3000/.

Building your first application

Create a new app

1. Open Toolpad by navigating to http://localhost:3000/. It should look like this:

   

2. Click CREATE NEW and name your application. Confirm by clicking CREATE. You'll then be taken to the workspace for your new app, which looks like this:

   

Assemble the UI

1. Hover over Component library and drag DataGrid and Image components into Canvas

   

   Congratulations, you are done building the UI! Now all you need to do is connect it with a data source.

2. Click anywhere inside Canvas (except on the components that you just added) to deselect added components

3. Locate ADD QUERY button inside Inspector and press that to start configuring our data source

   

4. This time you are going to use simple fetch datasource to query your data. Choose and press CREATE QUERY

   

5. Fetch some data about dogs from https://dog.ceo/dog-api:

   Use https://dog.ceo/api/breeds/list/all as a GET query URL

   Give a unique name to this query i.e. dogQuery

   

6. Now because data comes in different shapes and forms you can provide a quick and convenient way to transform response data - enable option and use return data.message expression

   

   In the response preview pane on the right you can see transformed data will be assigned to dogQuery

7. SAVE your changes and you will return to Canvas

8. Select DataGrid component by clicking on it

9. Then locate rows binding button in the Inspector and click to configure data binding

   

10. Use a dogQuery variable available in the scope as a binding expression. Because rows property expects array type value, you first need to convert dogQuery.data (which is object) to array:

    Object.entries(dogQuery.data);
    

    Copy (or $keyC)

    and click UPDATE BINDING

    

11. You have finally connected data source to your UI component!

    

12. You can make your app a bit more interactive by displaying an image of a selected breed. Create a dynamic query which reacts to the selection inside DataGrid component

    • ADD QUERY -> create fetch type
    • name -> imageQuery
    • Add new parameter named breed
    
    • Bind breed parameter value to dataGrid.selection ? dataGrid.selection[0] : 'akita' (grabs selected value from dataGrid or defaults to akita breed)
    
    • Then bind query url property to https://dog.ceo/api/breed/${parameters.breed}/images/random
    
    • Last transform responese using return data.message; and click SAVE

13. Next you want to display a picture of a selected breed using Image component

    • select Image component

    • bind src prop to imageQuery.data and now you can preview pictures of a selected breed

    

    Congratulations! 🎉 You now have an app fetching data from remote source and reacting to the user input!

Deploying your application

In order to share your application with others you will want to deploy it

1. Click DEPLOY button in the top navigation:

   

2. (Optional) Enter description of your choice

3. Click DEPLOY to confirm.

   

Once deployed, the app will automatically open in a new browser tab.