Skip to content


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 DataGrid 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 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
  • design a page and connect its data


Make sure to install Node.js on your system.

Building your first application

Create a new app

  1. Create a new application

    npx create-toolpad-app dog-app
  2. Start the development server

    cd dog-app
    npm run dev

    The Toolpad application editor opens automatically in your browser.

Assemble the UI

  1. Hover over Component library and drag DataGrid component into Canvas. Now repeat the process and drag an Image component on the Canvas as well. When you're done, the canvas should look like:

    Drag components

    This will be the user interface of our application. Next we'll proceed with connecting it to backend data.

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

  3. Locate Add query button inside Inspector

    Add query

    Press the button and choose "serverside HTTP request".

    Choose serverside HTTP request
  4. We'll be using the open source dog API for our example. First give the query a name "dogQuery". The name must be unique in the page. Then set as the URL. The HTTP method can be left at GET. Click the preview button to inspect the result of this request. If all went well it should like like this:

    Fetch URL
  5. APIs expose data in different shapes and forms. As you can see, this API returns an object containing a message property. This is not ideal for displaying in a datagrid. Luckily we can freely transform this data serverside. To do so choose the Transform tab and enable the Transform response option. Add the expression return Object.entries(data.message) in the editor. Click Preview again to verify the result.

    Transform response
  6. Save the query and close the editor to get back to the Canvas. The result of this HTTP request will now be available as state on the page. You'll learn how to bind the user interface to this state next.

  7. Click the DataGrid component to select it.

  8. Find the "rows" property in the Inspector. Notice there's a small link icon to the right of it. All bindable properties in Toolpad can be bound to state on the page. You can identify bindable properties by this link icon.

    Bind data

    Click the icon to open the binding editor. On the left you'll see a list of all bindable state in the page, on the right there's a code editor that accepts any JavaScript expression. All bindable state is available in the scope of this expression.

  9. Use a dogQuery variable available in the scope as a binding expression.;

    then click Update binding

    If all went well, the DataGrid should now display the data from the HTTP request

    Connected data
  10. Now let's make our app interactive by displaying a random image of the selected breed. We'll create a dynamic query which reacts to the selection inside DataGrid component. Click Add query and select "serverside HTTP request" again. Name it "imageQuery" and add a parameter "breed"

    Breed parameter

    Bind the breed parameter value to dataGrid.selection?.[0] ?? 'akita'. This will use the selected value from dataGrid and defaults to the "akita" breed when no row has been selected.

    Breed binding

    Then bind the query URL to

    url binding

    Click Update binding to exit the query editor.

  11. In the canvas select the Image component and bind src prop to Try selecting different rows in the datagrid to see the image update to a random image of the selected breed.

    Preview image