A forma de um bloco é determinada por um renderizador, com base no definição de bloco (ou seja, seus campos e conexões).
Renderizadores integrados
O Blockly fornece três renderizadores integrados, sendo que cada um fornece uma uma sensação diferente ao programa.
| Renderizador | Descrição | Imagem |
|---|---|---|
| Thrasos | O renderizador recomendado. É uma abordagem uma versão moderna do renderizador geras, com mais até espaçamento e bordas sólidas. | 
|
| Geras | O renderizador padrão. Ele é original com que o Blockly foi criado. | 
|
| Zelos | Um renderizador baseado no design de blocos do Scratch-3.0. |  |
Para usar um desses renderizadores, transmita o nome nas opções de injeção:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Renderizadores personalizados
Se você deseja ter uma aparência diferente de qualquer programa integrados, também é possível criar um renderizador personalizado. Para começar, A equipe do Blockly recomenda que você:
- Leia os documentos sobre conceitos do renderizador para saber mais como todos os componentes de um renderizador se encaixam.
- Conclua o codelab do renderizador personalizado para: tenha experiência prática com a renderização personalizada.
- Adicione o renderizador de depuração ao seu projeto.
- Personalize seu renderizador.