รูปร่างของบล็อกจะกำหนดโดยโปรแกรมแสดงผล โดยอิงตามคำจำกัดความของบล็อก (นั่นคือ ช่องและการเชื่อมต่อ)
โปรแกรมแสดงผลในตัว
Blockly มีโปรแกรมแสดงผลในตัว 3 รายการ ซึ่งแต่ละรายการจะให้ความรู้สึกที่แตกต่างกันเล็กน้อย
| โปรแกรมร่างภาพ | คำอธิบาย | รูปภาพ |
|---|---|---|
| Thrasos | โปรแกรมแสดงผลที่แนะนํา ซึ่งเป็นการแสดงผลแบบสมัยใหม่มากขึ้นของโปรแกรมแสดงผล Geras โดยมีระยะห่างที่สม่ำเสมอมากขึ้นและขอบที่ทึบ | 
|
| Geras | โปรแกรมแสดงผลเริ่มต้น ซึ่งเป็นโปรแกรมแสดงผลต้นฉบับที่ใช้สร้าง Blockly | 
|
| Zelos | โปรแกรมแสดงผลที่อิงตามการออกแบบบล็อกของ Scratch-3.0 |  |
หากต้องการใช้โปรแกรมแสดงผลอย่างใดอย่างหนึ่งต่อไปนี้ ให้ส่งชื่อไปยังตัวเลือกการกําหนดค่า
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
โปรแกรมแสดงผลที่กําหนดเอง
หากต้องการให้โปรแกรมมีรูปลักษณ์ที่แตกต่างจากโปรแกรมที่ใช้โปรแกรมแสดงผลในตัว คุณก็สร้างโปรแกรมแสดงผลที่กำหนดเองได้ ในการเริ่มต้นใช้งาน ทีม Blockly ขอแนะนำให้คุณทำดังนี้
- อ่านเอกสารแนวคิดเกี่ยวกับโปรแกรมแสดงผลเพื่อดูว่าคอมโพเนนต์ทั้งหมดของโปรแกรมแสดงผลทำงานร่วมกันอย่างไร
- ทําCodelab เกี่ยวกับโปรแกรมแสดงผลที่กําหนดเองให้เสร็จสิ้นเพื่อฝึกฝนการใช้งานการแสดงผลที่กําหนดเอง
- เพิ่มโปรแกรมแสดงผลสำหรับแก้ไขข้อบกพร่องลงในโปรเจ็กต์
- ปรับแต่งโปรแกรมแสดงผล