Skip to main content

Build custom renderers

2. Setup​

This codelab will add code to the Blockly sample app to create and use a new custom renderer.

The application​

Use the npx @blockly/create-package 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-renderer-codelab. This will create a blockly application in the folder custom-renderer-codelab.
  2. cd into the new directory: cd custom-renderer-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 initial application uses the default renderer and contains no code or definitions for a custom renderer.

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. customRenderersWorkspace will work:

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

Explore the starter code​

Take a moment to explore the code you just created in the custom-renderer-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.