Overview
A general, high-level description of Toolpad Studio and its capabilites.
Introduction
Toolpad Studio is a self-hosted, low-code internal tool builder. It is open-sourced, and powered by MUI's components. Toolpad Studio 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 Studio below:
You can check out the demo video here.
Key features
Open-source: Toolpad Studio is open-sourced, which means the code is free for you to observe and inspect, forever!
Local-first: Toolpad Studio is a Node.js package that can be added to your existing codebase and runs locally first.
Low-code: Toolpad Studio 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 Studio 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 Studio as soon as you feel limited by the built-in features.
- Connect your data: Toolpad Studio lets you return data right from server-side 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.