Skip to main content

Build custom renderers

1. Codelab overview​

What you'll learn​

  • How to define and register a custom renderer.
  • How to override renderer constants.
  • How to change the shape of connection notches.
  • How to set a connection's shape based on its type checks.

What you'll build​

This codelab builds a custom renderer which adjusts renderer constants and uses different connection shapes depending on the input types.

Screenshot of a custom renderer with rectangles for the Number input/outputs and a puzzle tab for the Boolean input/output attached to an "if" block

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

What you'll need​

  • Basic understanding of renderers and toolboxes in Blockly.
  • NPM installed (instructions).
  • Comfort using the command line/terminal.