Or maybe use the Verdana font, the font that snap uses.

Or Candara, the font in the Snap! logo.

How about this?


It was generated by snapblocks, and manually modified to make the hat block blank (snapblocks makes empty blocks very skinny, so I had to put some text in the hat block to make it full size).


Screenshot 2024-03-28 15.31.04

(Please excuse the bad editing. I haven't got around to compiling a real photo editor from source.)

Don't worry, I can't even edit snapblocks svg in inkscape anyway, as it does a bunch of stuff that inkscape doesn't like.

How did you make the words "Snap!" and "Blocks"? Does whatever typeset those words not do italics?

Those just use the svg <text> element, which you can use regular css text styling on. Here it is with making it italic.


Keep in mind, I had to separate the ! from "Snap", so I just magic numbered it's x position.

edit: and now that I'm on my phone, which doesn't have the verdana font, I can see that there is a larger space in a different font. I really should figure out how to fix that (although I'm mot sure it's possible). Thankfully, the recommended way to use snapblocks, is to use the library, which fixes that, or to use png images, as those don't change at all. Using the precompiled svg is not very good.

Isn't there a tspan tag? You wouldn't have to use another text element, and it would be visually better.

Oh yeah, I forgot about that, as I don't use it in snapblocks.

this is actually good!.... just one problem

nvm now i know it'll soon exist (the dev version in the github)

I have finally release v1.3.0!



  • Added showSpaces option, which shows spaces in inputs.
  • Added all the blocks from Snap!, Scratch 3, Scratch 2, Scratch 1.4, and BYOB.
  • grey and gray are both the same category.
  • Add gears, gearPartial, gearBig, globe, and globeBig icons.
  • Added a version property to the snapblocks library.


  • Element options are no longer prefixed with sb-. I made this change because no one has used them yet (not even the snap wiki).
  • The style element option is now blockStyle instead of sb-style.
  • These characters are no longer ignored, ,%?:.
  • Round inputs that used to turn into blocks, are put as text in the input. E.g. set instrument to ((1) Piano V) will have the input (1) Piano instead of turning into a block (this only happens when it ends with a v or V).
  • Removed the version attribute in the resulting svg image, as that is deprecated.


  • Fixed zebra coloring in c-shaped inputs
  • Snap! style should be much much more accurate (I spent an excruciatingly long time switching tabs repeatedly).
  • snap-flat inset border works the same in all browsers now (although the method I used may need a bit of tweaking to minimize the svg size).
  • Snap! rings now have a consistent input size.
  • The first space in comments is removed.
  • Inline blocks can now be multiline. It keeps the effect where they're placed inline with text, but you can use multiline blocks, and c-shapes.
  • More small fixes that I don't need to

Full Changelog: Comparing v1.2.0...v1.3.0 · snap-blocks/snapblocks · GitHub

Try it out now!

An example of showing spaces


Rings also look much better.

snapblocks (41)

Very good! It's now looking like realistic Snap! now.

Now, what about exporting to XML?

I finally got around to updating the original post with updated images (and links).


untitled script pic
i feel like we're only missing this now

We also cannot make those in snap-blocks too:

This feature is missing in snapblocks. Probably the syntax would be <T> and <F>. :thinking:

Yes, I know, I've just been thinking of how to implement it.

That's actually a good idea. I've just been thinking of doing.

<true> for untitled script pic when it's by itself, but it would be small inside a block, like this

if <true> {



But I really like you're idea with using <t> and <f> for the small booleans, and <true> and <false> for the big booleans. It would definitely make it a lot less complicated.

wouldnt <true> and <false> like that would confuse people since the blocks with the same name are already on snap blocks? i feel like for the true/false block in current snap should be like <reportTrue> or something