Renderer

The shape of a block is determined by a renderer, based on the block's definition (that is, its fields and connections).

Built-in renderers

Blockly provides three built-in renderers, each of which give a slightly different feel to the program.

Renderer Description Image
Thrasos The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. thrasos
Geras The default renderer. It is the original renderer that Blockly was built with. geras
Zelos A renderer based on Scratch-3.0 block design. zelos

To use one of these renderers, pass the name into the injection options:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

Custom renderers

If you want to give your program a different look and feel than any of the built-in renderers, you can also create a custom renderer. To get started the Blockly team recommends you:

  1. Read through the renderer concept docs to learn how all of the components of a renderer fit together.
  2. Complete the custom renderer codelab to get hands-on practice with custom rendering.
  3. Add the debug renderer to your project.
  4. Customize your renderer.