La forma de un bloque la determina un renderizador, según la definición del bloque (es decir, sus campos y conexiones).
Renderizadores integrados
Blockly proporciona tres renderizadores integrados, cada uno de los cuales le da una apariencia ligeramente diferente al programa.
| Procesador | Descripción | Imagen |
|---|---|---|
| Thrasos | Es el renderizador recomendado. Es una versión más moderna del renderizador de Geras, con un espaciado más uniforme y bordes sólidos. | 
|
| Geras | El renderizador predeterminado. Es el renderizador original con el que se compiló Blockly. | 
|
| Zelos | Un renderizador basado en el diseño de bloques de Scratch 3.0. |  |
Para usar uno de estos renderizadores, pasa el nombre a las opciones de configuración:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Renderizadores personalizados
Si deseas darle a tu programa un aspecto diferente al de cualquiera de los renderizadores integrados, también puedes crear uno personalizado. Para comenzar, el equipo de Blockly te recomienda lo siguiente:
- Lee las documentación de conceptos del renderizador para aprender cómo se combinan todos los componentes de un renderizador.
- Completa el codelab del renderizador personalizado para obtener práctica con la renderización personalizada.
- Agrega el renderizador de depuración a tu proyecto.
- Personaliza tu renderizador.