Blockly Renderer Switching

A preview of blockly style changer. There’s a little button that pops up a list of style to choose from (only 3) at the bottom near where you can switch between blocks and javascript code. If someone were to add and register more custom styles in blockly, they will be automatically included on the list.

The style choice is remembered / stored in the localStorage

The default style: (geras)

Scratch 3 style (zelos)


@stefan.hoehn @florian-h05 @ysc @rlkoshak


Is there any substantial difference between geras and thrasos? The only thing I see is the overlap of the bottom projections on each block (above in geras and behind in thrasos).

Thrasos is the “lighter” version of geras.

1 Like

I really like the idea of being able to choose a theme for the blocks.

I like the look of the Scratch style the best but the skeuomorphic slots and sockets in the geras/thrasos styles are more intuitive I think. I’d choose thrasos as the default (I kind of like the more bold borders) or geras as the default. Though that’s just a tiny suggestion. As long as they all work the same it’s all good.

I really like that users can choose the style they like. I wish there were more than these three since two of them are nearly identical.

What drives the decision to make the change in local storage? I don’t have an opinion on that, just curious.

I do too. If I find others, I will include them, or perhaps create them in the future, but that’s for a separate pr.

Because it’s the easiest to implement. It is similar to the options for dark/light theme, android vs iOS vs desktop theme, animation and a few other GUI preferences, these are all stored in local storage so at least that’s consistent.

Should it be stored on the server? If so, it will require some changes in the rest API (core) too unless there’s already a mechanism for that?

This depends. The zelos style is similar to scratch and MakeCode (which is also used in Minecraft coding) so there are a huge number of people coming from those backgrounds already very familiar with zelos style. The Geras style feels more “old school” to them (pre-Scratch3). I’m consulting with my 6 year old and getting his advice and ideas on styling and features. There are plugins to customise the looks, colour scheme, shape, sizes and enhanced functionalities of the blocks in scratch.

It also more clearly distinguish booleans (diamond shaped blocks and inputs) vs other type of values (rounded pills) so IMO it’s more intuitive.

In any case, the default from blockly when no renderer is specified is Geras.

PR submitted

1 Like

I can see it lots of different ways. There are lots of good arguments for setting it in local storage. There are also some good arguments for storing it on the server (e.g. don’t have to change the setting every time I load in a new browser, clear the cache, etc.). I don’t have any opinion on which one is right. Easiest to implement is probably the best choice over all. I was just curious.

I think our primary list of users skew a little older than that. ;-D I do like the difference in booleans. But I suspect some of our older users might find the ovals a bit more confusing than the slots and plugs. But it’s all minor quibbles and probably not even worth the number of words we’ve already spent on it.