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 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.

The complete code used in this codelab can be viewed in the blockly repository under docs/docs/codelabs/custom-renderer.

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';