La forme d'un bloc est déterminée par un moteur de rendu, en fonction de la définition du bloc (c'est-à-dire ses champs et ses connexions).
Moteurs de rendu intégrés
Blockly fournit trois moteurs de rendu intégrés, chacun offrant un aspect légèrement différent au programme.
| Moteur de rendu | Description | Image |
|---|---|---|
| Thrace | Moteur de rendu recommandé Il s'agit d'une version plus moderne du moteur de rendu des geras, avec un espacement plus régulier et des bordures pleines. | 
|
| Géra | Moteur de rendu par défaut C'est le moteur de rendu original avec lequel Blockly a été créé. | 
|
| Zélos | Moteur de rendu basé sur la conception de blocs Scratch-3.0 |  |
Pour utiliser l'un de ces moteurs de rendu, transmettez son nom aux options d'injection:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Moteurs de rendu personnalisés
Si vous souhaitez donner à votre programme un aspect et une convivialité différents de ceux 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 de moteur de rendu pour découvrir comment tous les composants d'un moteur de rendu s'intègrent les uns aux autres.
- Suivez l'atelier de programmation sur le moteur de rendu personnalisé pour vous entraîner à utiliser le rendu personnalisé.
- Ajoutez le moteur de rendu de débogage à votre projet.
- Personnalisez votre moteur de rendu.