Overview

Browse our collection of Toolpad Studio examples that help you familiarise with Toolpad Studio concepts.

This collection includes apps that showcase connecting to APIs, adding custom components, adding secrets, adding authentication, working with ORMs and more.

If you're interested in how we, at MUI, use Toolpad Studio to build internal apps, check out the blog post.

npm stats

This analytics dashboard shows how to track a KPI from a third-party data source.

Source code

Basic CRUD application

An admin application to showcase how CRUD operations work in Toolpad Studio.

Source code

QR Code generator

A basic Toolpad Studio application that can be used to turn any text or URL into a QR code.

Source code

With Prisma

A basic Toolpad Studio application that demonstrates how to integrate with Prisma.

Source code

Google Sheet

Quickly fetch data from Google Sheets to build a Toolpad Studio app.

Source code

Dog app

An app that shows dog images based on selected breeds or sub-breeds.

Source code

Customized data grid

A basic Toolpad Studio app that shows how to customize a data grid column using a custom code component.

Source code

GraphQL app

An app that shows latest 100 stargazers info for any GitHub repository.

Source code

With WASM

A basic Toolpad Studio application that demonstrates integrating with WASM modules.

Source code

Data provider with prisma

A basic Toolpad Studio application that demonstrates how to use data providers with Prisma.

Source code

With Supabase

A Toolpad Studio app that fetches data from Supabase and shows it in a list component.

Source code

Stripe invoice downloader

A Stripe app to fetch and download invoices.

Source code

Charts

A basic Toolpad Studio application that demonstrates how to use chart component.

Source code

Google Authentication

An app that shows how to set up Google authentication in Toolpad Studio.

Source code

Custom server

An app that shows how to use Toolpad Studio with a custom server.

Source code