La forme d'un bloc est déterminée par un moteur de rendu, en fonction définition du bloc (c'est-à-dire ses champs et connexions).
Moteurs de rendu intégrés
Blockly fournit trois moteurs de rendu intégrés, chacun offrant une différent du programme.
| Moteur de rendu | Description | Image |
|---|---|---|
| Thrasos | Moteur de rendu recommandé. Il s'agit d'un une version moderne du moteur de rendu Geras, avec plus un espacement régulier et des bordures pleines. | 
|
| Geras | Moteur de rendu par défaut. Il s'agit de l'original avec lequel Blockly a été créé. | 
|
| Zelos | Moteur de rendu basé sur la conception de blocs Scratch-3.0. |  |
Pour utiliser l'un de ces moteurs de rendu, transmettez le nom aux options d'injection:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Moteurs de rendu personnalisés
Si vous souhaitez donner à votre programme une apparence différente de celle des des moteurs de rendu intégrés, vous pouvez également créer un moteur de rendu personnalisé. Pour commencer, L'équipe Blockly vous recommande:
- Consultez la documentation sur les concepts liés au moteur de rendu pour en savoir plus la façon dont tous les composants d'un moteur de rendu s'emboîtent.
- Vous avez suivi l'atelier de programmation sur le moteur de rendu personnalisé pour : vous entraîner à utiliser l'affichage personnalisé.
- Ajoutez le moteur de rendu de débogage à votre projet.
- Personnalisez votre moteur de rendu.