Skip to content


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.


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


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
  2. Start the docker compose services

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

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:

    Apps overview
  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:

    Toolpad overview

Assemble the UI

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

    Drag components

    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

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

    Fetch datasource
  5. Fetch some data about dogs from

    Use as a GET query URL

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

    Fetch URL
  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

    Transform response

    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

    Bind data
  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 (which is object) to array:


    and click UPDATE BINDING
  11. You have finally connected data source to your UI component!

    Connected data
  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
    Breed parameter
    • Bind breed parameter value to dataGrid.selection ? dataGrid.selection[0] : 'akita' (grabs selected value from dataGrid or defaults to akita breed)
    Breed binding
    • Then bind query url property to${parameters.breed}/images/random
    url binding
    • 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 and now you can preview pictures of a selected breed

    Preview image

    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:

    Rocket button
  2. (Optional) Enter description of your choice

  3. Click DEPLOY to confirm.

    Deploy description

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