Toolpad

Toolpad Core provides a set of pre-built components designed to accelerate the development of internal tools and dashboards. The core component library includes:

• Account: User profile and account management UI.
• App Provider: The root provider for managing application state and configuration.
• CRUD: Components for performing Create, Read, Update, and Delete operations on data.
• Dashboard Layout: A structured layout for dashboard-style applications.
• Page Container: A wrapper for consistent page-level layout and spacing.
• Sign-in Page: A ready-to-use authentication UI.

:::warning Toolpad Studio has been deprecated. Please use Toolpad Core instead. :::

Toolpad Studio is a visual builder designed to allow fast frontend construction so developers can focus on writing logic. It provides a component library, an inspector panel for property tweaking, and a canvas for layout management.

The basic-crud-app example serves as a reference implementation for several core Toolpad patterns:

• Backend functions: How to implement and invoke logic on the server side.
• Forms and Components: Using standard UI components and form handling within the Toolpad ecosystem.
• Data Grid Operations: How to perform row-level actions such as deleting or adding rows in a data grid.
• Query Parameter Binding: How to bind component state or behavior to URL query parameters.

The npm-stats example serves as a reference implementation for several Toolpad Studio capabilities:

1. Third-party REST API integration: Fetching data from external sources into a Toolpad Studio app.
2. Custom components: Implementing and using custom UI elements like charts.
3. Material UI integration: Using pre-built components such as the MUI X Date Picker.
4. Data transformation: Processing and transforming raw data for display within the dashboard.

The QR Code generator example serves as a reference for several Toolpad Studio capabilities:

• Custom Functions: Using a custom function that accepts parameters.
• External Dependencies: Importing and using external npm packages.
• UI Components: Utilizing TextInput and Image components.
• Data Binding: Binding a TextInput component to a query parameter.

To enable Role-Based Access Control (RBAC) across your application, wrap your layout with the AuthorizationProvider from @mui/toolpad/auth. You must provide a getRolesFromUser function that extracts roles from your user object.

This provider enables both UI-level protection and data-level enforcement.

// app/layout.tsx
import { AuthorizationProvider } from '@mui/toolpad/auth';

function getRolesFromUser(user) {
  return user.roles;
}

export default function Layout() {
  return <AuthorizationProvider getRolesFromUser={getRolesFromUser} />;
}

Toolpad Studio allows you to connect data (from queries or state) to component properties using the Bind button found in the inspector.

How to Bind

1. Select a component (e.g., a Data Grid).
2. Locate a bindable property in the inspector (e.g., rows). Properties with a Bind button next to them can be connected to page state.
3. Click the Bind button to open the binding editor.
4. Enter a JavaScript expression that references the available state. For a query named dogQuery, you would use:

   dogQuery.data;

5. Save the binding.

The Toolpad Studio canvas utilizes a grid layout system for positioning components:

• Rows: Used to position components vertically within the layout.
• Columns: Used to place components in dedicated vertical tracks alongside other components.