Skip to content
+

Installation

Setup Toolpad Studio to run on your own machine.

Create a Toolpad Studio app

Start by opening a terminal and cd into a folder you'd like to create your application in. Then run the command:

npx create-toolpad-app@latest --studio my-toolpad-app

This will run the create-toolpad-app CLI which initializes the directory ./my-toolpad-app with a Toolpad Studio application.

Run the Toolpad Studio editor

Change the current working directory to the application folder:

cd my-toolpad-app

Then start the development mode

npm run dev

This starts the development server on port 3000 or the first available port after that and opens the browser to the Toolpad Studio editor.

Install Toolpad Studio in an existing project

Start by installing the required dependencies:

npm install @toolpad/studio

Then you'll have to add the Toolpad Studio scripts to your package.json:

// ./package.json
...
  "scripts": {
    "toolpad-studio:dev": "toolpad-studio dev ./my-toolpad-app",
    "toolpad-studio:build": "toolpad-studio build ./my-toolpad-app",
    "toolpad-studio:start": "toolpad-studio start ./my-toolpad-app"
  }
...

Now you can start your Toolpad Studio application using one of the commands:

npm run toolpad-studio:dev

When you run this command, Toolpad Studio will automatically initialize a new application in the ./my-toolpad-app folder.