Code Screenshots are slightly cropped
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 641
- Avg merge
- 12h 4m
- Merged PRs (30d)
- 57
Description
Bug Template
Describe the bug
When you create an image of your code, the blocks on the edge are all a little cropped.
It's not that much visible, but when you try to upscale the images you will see it.
Based on the documentation at https://makecode.microbit.org/blocks-embed we made a little tool to help teacher to create images for their materials. This tool has an upscaling function and the posibility to export SVG and makes the issue more visible: https://go.calliope.cc/tools/makecode/codeimages/ (it's german, but pretty straight forward and everyone's welcome to contribute and translate).
To Reproduce
Steps to reproduce the behavior:
- Create some Blocks
- Right click
- Create screenshot of code
- Check the edges of the image
Expected behavior
The image canvas should be slightly bigger to cover the full block.
Screenshots

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the block editor's “Create screenshot of code” action described in the issue and compare the canvas bounds with blocks at each edge. Reproduce the listed steps and consult the linked blocks-embed documentation; done when full edge blocks appear without cropping, including after upscaling and SVG export.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100