Renderers

A renderer in Blockly controls the shape of a block, including height, padding, border thickness, and connection shape.

Custom renderers

If you want to customize the shape of blocks, you will need to create a custom renderer. You can learn more about this process by completing the codelab or reading the reference documentation. It may be helpful to read the code for any of Blockly's built-in renderers to understand how they work.

To create a custom renderer, you will need to:

  1. Define a new renderer. You can subclass either the base renderer class or any of the existing renderers depending on where you'd like to start from.
  2. Override the parts you wish to change.
    1. For example, to add more padding to blocks, you can subclass a ConstantProvider (again, either the base or any existing renderer), and override the relevant constant. All other values will remain the same as your chosen base class.
    2. In your custom Renderer subclass, you need to hook up the new ConstantProvider class. Override the makeConstants_ function to return a new instance of your custom ConstantProvider instead of the base class.
    3. Follow the same process when overriding other classes such as PathObject or Drawer.

  3. Register your renderer:

    Blockly.blockRendering.register('custom_renderer', CustomRenderer);

  4. Use your renderer in your application:

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

Built-in renderers

Blockly provides several pre-built renderers. You can use these as-is or you can use them as the base of a custom renderer.

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

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

To subclass them, extend the appropriate class(es):

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}