ब्लॉक का आकार रेंडरर की मदद से तय किया जाता है. यह ब्लॉक की परिभाषा (यानी, उसके फ़ील्ड और कनेक्शन) के आधार पर तय होता है.
पहले से मौजूद रेंडरर
ब्लॉकली, तीन बिल्ट-इन रेंडरर उपलब्ध कराता है. इनमें से हर एक, प्रोग्राम को कुछ अलग तरीके से दिखाता है.
| रेंडर करने वाला | ब्यौरा | इमेज |
|---|---|---|
| थैसोस | सुझाया गया रेंडरर. जेरा रेंडरर का यह वर्शन ज़्यादा आधुनिक तरीके से लिया गया है. इसमें ज़्यादा स्पेस और ठोस बॉर्डर हैं. | 
|
| जेरस | डिफ़ॉल्ट रेंडरर. यह ओरिजनल रेंडरर है, जिसे Blockly की मदद से बनाया गया था. | 
|
| ज़ेलोस | Scratch-3.0 ब्लॉक के डिज़ाइन पर आधारित रेंडरर. |  |
इनमें से किसी एक रेंडरर का इस्तेमाल करने के लिए, नाम को इंजेक्शन के विकल्प में डालें:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
पसंद के मुताबिक रेंडर करने वाले
अगर आप अपने प्रोग्राम को किसी भी बिल्ट-इन रेंडरर से अलग लुक और अनुभव देना चाहते हैं, तो आप पसंद के मुताबिक रेंडरर भी बना सकते हैं. शुरू करने के लिए, Blockly टीम आपका सुझाव देती है:
- यह जानने के लिए कि रेंडरर के सभी कॉम्पोनेंट एक साथ कैसे फ़िट होते हैं, रेंडरर कॉन्सेप्ट से जुड़े दस्तावेज़ों को पढ़ें.
- कस्टम रेंडरिंग के साथ प्रैक्टिस करने के लिए, कस्टम रेंडरर कोडलैब पूरा करें.
- अपने प्रोजेक्ट में डीबग रेंडरर जोड़ें.
- रेंडरर को पसंद के मुताबिक बनाएं.