# Rendering blocks to images

**URL:** <https://forum.makecode.com/t/rendering-blocks-to-images/28135>\
**Category:** Help\
**Created:** [April 8, 2024, 3:47am UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135 "2024-04-08T03:47:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [April 8, 2024, 3:47am UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135/1 "2024-04-08T03:47:26Z")

</div>

I’m trying to render code to images so I found this [lovely source of information](https://maker.makecode.com/blocks-embed). I [edited the fiddle](https://jsfiddle.net/kd58s0ec/) so I could render MakeCode Arcade blocks instead of microbit blocks.

So I was able to convert

```js
animation.runMovementAnimation(mySprite, [], 500, false);

```

to

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/f/f838ad92ff809b089b9aaf51343c5410be18ebee.png)  
which is great but is it possible to remove the `on start` block? I just want to have the singular block by itself. (Just like how you guys render docs for these blocks)

Also on a side note, do we have to use an iframe to render blocks or is there an API already in place for this? The iframe takes quite a bit of time to load, not sure if that is just the entire blockly renderer loading or something else…

---

<div class="post-metadata">

**Author:** ![Josef](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/josef/32/12457_2.png) [@Josef](https://forum.makecode.com/u/Josef)\
**Post date:** [April 9, 2024, 2:16pm UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135/2 "2024-04-09T14:16:44Z")

</div>

Isnt that already in the animation category?

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [April 10, 2024, 12:21am UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135/3 "2024-04-10T00:21:39Z")

</div>

? That is in the animation category.

---

<div class="post-metadata">

**Author:** ![CopySprite](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/copysprite/32/35475_2.png) [@CopySprite](https://forum.makecode.com/u/CopySprite)\
**Post date:** [April 10, 2024, 4:01pm UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135/4 "2024-04-10T16:01:52Z")

</div>

This block is in the animation category.  
 ![Screenshot 2024-04-10 9.50.46 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/3/37f20a189b25c5344de70b2c720c8257e269993d.png)

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [April 10, 2024, 4:02pm UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135/5 "2024-04-10T16:02:41Z")

</div>

Add the `snippetMode` option around line 57:

```javascript
            f.contentWindow.postMessage({
                type: "renderblocks",
                id: pre.id,
                code: pre.innerText,
                options: {
                	packageId: pre.getAttribute("pub"),
                  snippetMode: true
                }
            }, "https://arcade.makecode.com/");

```

---

<div class="post-metadata">

**Author:** ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)\
**Post date:** [April 10, 2024, 7:48pm UTC](https://forum.makecode.com/t/rendering-blocks-to-images/28135/6 "2024-04-10T19:48:42Z")

</div>

Wow! I’m so surprised I managed to miss that haha, thanks!

I think I need some more sleep… 😅

I wonder what the plus symbol is supposed to be for 🤔

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/588636ebfa8d61040bc5a7e9067ada604a307911.png)