Skip to content
Edit this page
+

Overview

A general, high-level description of Toolpad and its capabilites.

Introduction

Toolpad is a self-hosted, low-code internal tool builder. It is open-sourced, and powered by MUI's components. Toolpad is designed for any developer who wants to create internal apps faster. Drag and drop pre-built UI components, connect your data sources, release your app, and you're done! Check out the interactive product walkthrough of Toolpad below:

You can check out the demo video here.

Key features

  • Open-source: Toolpad is open-sourced, which means the code is free for you to observe and inspect, forever!

  • Local-first: Toolpad is a Node.js package that can be added to your existing codebase and runs locally first.

  • Low-code: Toolpad intends to let you get started with a front-end much faster, by way of a drag-and-drop editor, so that you can focus on backend code.

  • Self-hosted: Toolpad runs on your machine - which allows you to exert complete control and connect to your data without worries.

Advantages

  • Build faster than ever before: from first step to a finished app in a few hours—simply drag and drop the components you need.
  • Extensible with code: build low-code with pro-code extensibility. You can write JavaScript anywhere in Toolpad as soon as you feel limited by the built-in features.
  • Connect your data: Toolpad lets you return data right from serverside functions which can be automatically connected to components on the page.
  • Own your code: All configuration is stored in local files which you can version-control, edit, git-sync and deploy in any way you want.

Terminology

  • Explorer: This is where you can define and manage pages and other project objects.
  • Component library: This is where you can find components to drag and drop onto the canvas.
  • Canvas: This is where you build the UI for your application.
  • Inspector: This is where you can inspect and modify properties of the component selected in the canvas.