Skip to main content

Customizing a Blockly toolbox

2. Setup​

Create the application​

Use the npx @blockly/create-package app command to create a standalone application that contains a sample setup of Blockly, including custom blocks and a display of the generated code and output.

  1. Run npx @blockly/create-package app custom-toolbox-codelab in your terminal. This will create a Blockly application in the folder custom-toolbox-codelab.
  2. Use cd to move into the new directory: cd custom-toolbox-codelab.
  3. Run npm start to start the server and run the sample application.
  4. The sample app will automatically run in the browser window that opens.

The local address in the address bar of your browser starting with http://localhost: shows where your app is. If you accidentally close this window or tab, you can re-open this local address to view the app as long as npm start is still running.

The initial application has a toolbox definition included in the toolbox.js file. This codelab focuses on customizing the appearance of a Blockly toolbox rather than the content and categories, but feel free to experiment with customizing the content of the toolbox in toolbox.js.

Change the storage key​

Before setting up the rest of the application, change the storage key used for this codelab application. This will ensure that the workspace is saved in its own storage, separate from the regular sample app, so that it doesn't interfere with other demos.

In serialization.js, change the value of storageKey to some unique string. customToolboxWorkspace will work:

// Use a unique storage key for this codelab
const storageKey = 'customToolboxWorkspace';

Explore the starter code​

Take a moment to explore the code you just created in the custom-toolbox-codelab folder. If you'd like a more in-depth explanation of all of the code in the sample app, check out the getting started codelab which goes through creating this sample app from scratch.

For a briefer outline of the code, visit the sample app overview page for an overview of the included files and tooling.