Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Render Scratch blocks code to HTML.
JavaScript CSS HTML Python
branch: master

Rebuild translations

latest commit b5b3613f8f
blob8108 authored

Render Scratch blocks code to HTML.


Try it out!

scratchblocks2 is used to write Scratch scripts:

It's MIT licensed, so you can use it in your projects. But email me afterward; I'd love to hear about it :)


It's inspired by the block plugin by JSO that was used on the old Scratch Forums. It's a complete rewrite for Scratch 2.0, but it still uses the same syntax (with some minor additions).

It follows the philosophy of the original Block Plugin in that it tries to match the code you write as closely as possible, and doesn't check you've used the correct syntax. The block text is only used to find the correct colour.

For the full guide to the syntax, see the wiki.


The version of translations.js in this repo is designed for the Scratch Forums, so it supports all the languages there.

However, it can be made to accept any of the languages that Scratch supports. You just need to modify and run yourself, which will fetch language files from the Scratch translation server.

scratchblocks2 also requires some additional words which aren't in Scratch itself (mainly the words used for the flag and arrow images). I'd be happy to accept pull requests for those!


If you just want the code, have a look at the example HTML file, which uses the scripts hosted on GitHub Pages, and jQuery hosted off Google.

For a more detailed explanation, or if you want to host the files yourself, read on.

You need to include jQuery (in the <head> of your page):

<script src="//"></script>

Then include the scratchblocks2 CSS and JS:

<link rel="stylesheet" href="scratchblocks2.css">
<script src="scratchblocks2.js"></script>

Then just call scratchblocks2.parse after the page has loaded, which will render matching page elements to shiny scratch blocks. Its sole argument is the CSS-style selector for the elements that contain the scratchblocks code. It uses pre.blocks by default.


Finally, you need to put flag.png and arrows.png in the folder block_images, which must be in the same folder as scratchblocks2.css.

In summary, your directory layout should look something like this:


Inline blocks

To use blocks inside a paragraph...

I'm rather fond of the <code class="b">stamp</code> block in Scratch.

...make a separate call to parse using the inline argument.

scratchblocks2.parse("code.b", {inline: true});


See src/


Something went wrong with that request. Please try again.