La forma di un blocco viene determinata da un renderer, in base al definizione del blocco (ovvero i campi e le connessioni).
Renderer integrati
Blockly fornisce tre renderer integrati, ognuno dei quali fornisce una diverso rispetto al programma.
| Renderer | Descrizione | Immagine |
|---|---|---|
| Thrasos | Il renderer consigliato. Si tratta di un rivisitazione moderna del renderer geras, con altre una spaziatura uniforme e bordi solidi. | 
|
| Geras | Il renderer predefinito. È l'originale il renderer con cui è stato creato Blockly. | 
|
| Zelos | Un renderer basato sulla progettazione a blocchi Scratch-3.0. |  |
Per utilizzare uno di questi renderer, inserisci il nome nelle opzioni di inserimento:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Renderer personalizzati
Se vuoi conferire al tuo programma un aspetto diverso rispetto a qualsiasi altro renderer integrati, puoi anche creare un renderer personalizzato. Per iniziare, Il team di Blockly consiglia di:
- Leggi la documentazione sui concetti di rendering per apprendere l'interazione di tutti i componenti di un renderer.
- Completa il codelab del renderer personalizzato per fai pratica con il rendering personalizzato.
- Aggiungi il renderer di debug al progetto.
- Personalizza il renderer.