This will serve as a tutorial for writing snapblocks on the forum. The main snapblocks documentation is here, but I understand that not everyone on the forum can access that page (since most schools block github.io), so I have put the syntax page here on the snap forum. I will also make this post a wiki, so anyone can edit it and fix some mistakes I made, or change some things to make it better (I'm not very good at explaining how to use snapblocks).
How to write snapblocks
Snapblocks is written how you see it in Snap!, with each block on a newline.
when flag clicked
move (10) steps
say [Hello world!]
when flag clicked move (10) steps say [Hello world!]
There are of course different block shapes that you can use.
command
(reporter)
<predicate>
command (reporter :: obsolete) <predicate>
You can set more shapes with overrides
hat :: hat
cap :: cap
hat :: hat cap :: cap
However some blocks will automatically become that shape.
when flag clicked
stop [all V]
when flag clicked stop [all V]
You can also use :: condition to create a conditional hat.
when <> :: condition
when <> :: condition
Anything after :: defines the block's properties, such as its shape.
C-shapes
C-shapes are created using curly braces.
if <> {
} @addInput
if <> {
} @addInputAnything inside the curly braces are placed in the c-shape.
if <> {
move (10) steps
} @addInput
if <> {
move (10) steps
} @addInputInputs
As you probably noticed, there are inputs inside blocks, these are:
number (5)
string [strng]
boolean <>
number (5) string [strng] boolean <>
Number Input
A number input is created by using parentheses (). A number input can only have a number in it.
number (5)
number (5)
String Input
A string input is created by using square brackets []. A string input can have any text in it.
say [Hello world!]
say [Hello world!]
String inputs can also be larger (without any text). Just wrap the value inside with curly brackets.
(first word of [{}] :: operators)
(first word of [{hi}] :: operators)
(first word of [{}] :: operators)
(first word of [{hi}] :: operators)These curly brackets also surround a dropdown v (although it's about the same size as an empty normal dropdown input').
(text input dropdown [{hi v}] :: operators)
(text input dropdown [{hi v}] :: operators)Dropdowns
Dropdowns can be created by putting a v right before the closing bracket in inputs. There are 2 types of dropdowns, editable v, and read-only V.
editable number (5 v)
editable string [string v]
read-only (5 V)
read-only [string V]
editable number (5 v) editable string [string v] read-only (5 V) read-only [string V]
Number dropdowns can have anything in them.
(item (last v) of @list)
(item (last v) of @list)
Formatting
You can also format string and number inputs to make them italic or monospace.
Just wrap the text in the slot with square brackets [] for italics, and backticks for monospace ```.
The formatting does not go around the v in inputs with dropdowns.
(item ([last] v) of @list)
(JavaScript function \( @addInput \) \{ [``] \})
(item ([last] v) of @list)
(JavaScript function \( @addInput \) \{ [``] \})There is also a special value that can be used inside inputs, [__shout__go__], which turns into a green flag.
broadcast [[__shout__go__] V] @addInput
broadcast [[__shout__go__] V] @addInput
Color Input
Color inputs are created by putting a color code inside a string or number input. A color code can either be a hex color code, or an RGB value.
<touching [#911a44] ?>
<touching [rgb(145,26,68)] ?>
<touching (#911a44) ?>
<touching [#911a44] ?> <touching [rgb(145,26,68)] ?> <touching (#911a44) ?>
Currently, as of snapblocks 1.4.0, an RGB color cannot be used inside number inputs.
Boolean Input
A Boolean input is created by using angled brackets <>.
Boolean <>
Boolean <>
A Boolean input can only have some specific values, which are used to choose whether the input is true or false.
true <t>
false <f>
true <t> false <f>
However, you can also use the static (bigger) Boolean input.
true <true>
false <false>
true <true> false <false>
If you create a predicate with only a Boolean input that is either a static true or false, it will automatically be set to the Boolean block in Snap!
<<true>>
<<false>>
<<true>> <<false>>
Upvars
Upvars are created by putting another set of parentheses around a variable, like so.
script variables ((upvar)) @addInput
script variables ((upvar)) @addInput
Categories
Categories are automatically set for blocks that are in Snap!, or Scratch. However, you can manually set the category for any block. To set the category, put the category name after ::.
motion :: motion
looks :: looks
sound :: sound
pen :: pen
control :: control
sensing :: sensing
operators :: operators
variables :: variables
lists :: lists
other :: other
obsolete :: obsolete // used for blocks with no category
motion :: motion looks :: looks sound :: sound pen :: pen control :: control sensing :: sensing operators :: operators variables :: variables lists :: lists other :: other obsolete :: obsolete // used for blocks with no category
This is not an exhaustive list of all the Categories available in snapblocks, but it's the main categories used in Snap!
It is also possible to create custom colors, by using either a hex color code or an RGB color code.
custom :: #3a5f75
custom :: rgb(255, 100, 50)
custom :: #3a5f75 custom :: rgb(255, 100, 50)
Icons
Icons are created by putting either a @ sign or a $ sign before the icon name.
pause all @pause
pause all $pause
pause all @pause pause all $pause
Icon and text scale and color
You can change the scale and color of icons by adding -scale-r-g-b at the end of the icon name.
@flag-2-255-100-2 :: other
@flag-2-255-100-2 :: other
You can also change the scale and color of text using this system, only you have to put the text after $, not @.
$text-2-200-200-100
\$text-2-200-200-100
list of icons
Here's a list of all available icons.
greenflag @greenflag :: other greenFlag @greenFlag :: other flag @flag :: other stopSign @stopSign :: other stop @stop :: other octagon @octagon :: other turnLeft @turnLeft :: other turnRight @turnRight :: other clockwise @clockwise :: other counterclockwise @counterclockwise :: other loop @loop :: other loopArrow @loopArrow :: other addInput @addInput :: other delInput @delInput :: other verticalEllipsis @verticalEllipsis :: other list @list :: other pointRight @pointRight :: other turtle @turtle :: other turtleOutline @turtleOutline :: other pause @pause :: other cloud @cloud :: other cloudGradient @cloudGradient :: other cloudOutline @cloudOutline :: other flash @flash :: other blitz @blitz :: other camera @camera :: other circleSolid @circleSolid :: other circle @circle :: other ellipse @ellipse :: other notes @notes :: other storage @storage :: other brush @brush :: other pipette @pipette :: other paintbucket @paintbucket :: other bucket @bucket :: other eraser @eraser :: other location @location :: other gears @gears :: other gearPartial @gearPartial :: other gearBig @gearBig :: other globe @globe :: other globeBig @globeBig :: other square @square :: other robot @robot :: other stepForward @stepForward :: other file @file :: other fullScreen @fullScreen :: other grow @grow :: other normalScreen @normalScreen :: other shrink @shrink :: other smallStage @smallStage :: other normalStage @normalStage :: other stage @stage :: other turnAround @turnAround :: other poster @poster :: other tick @tick :: other checkedBox @checkedBox :: other rectangle @rectangle :: other rectangleSolid @rectangleSolid :: other dot @dot :: other line @line :: other cross @cross :: other crosshairs @crosshairs :: other speechBubble @speechBubble :: other speechBubbleOutline @speechBubbleOutline :: other turnBack @turnBack :: other turnForward @turnForward :: other magnifyingGlass @magnifyingGlass :: other magnifierOutline @magnifierOutline :: other selection @selection :: other polygon @polygon :: other closedBrush @closedBrush :: other footprints @footprints :: other keyboard @keyboard :: other keyboardFilled @keyboardFilled :: other listNarrow @listNarrow :: other flipVertical @flipVertical :: other flipHorizontal @flipHorizontal :: other trash @trash :: other trashFull @trashFull :: other arrowUp @arrowUp :: other arrowUpOutline @arrowUpOutline :: other arrowUpThin @arrowUpThin :: other arrowDown @arrowDown :: other arrowDownOutline @arrowDownOutline :: other arrowDownThin @arrowDownThin :: other arrowLeft @arrowLeft :: other arrowLeftOutline @arrowLeftOutline :: other arrowLeftThin @arrowLeftThin :: other arrowRight @arrowRight :: other arrowRightOutline @arrowRightOutline :: other arrowRightThin @arrowRightThin :: other arrowUpDownThin @arrowUpDownThin :: other arrowLeftRightThin @arrowLeftRightThin :: other
Rings
There are rings in Snap!, so it's possible to create rings in snapblocks.
({} @addInput)
(() @addInput)
(<> @addInput)
({} @addInput)
(() @addInput)
(<> @addInput)You can put any block inside the first input, as long as it fits the shape.
({move (10) steps} @addInput)
((x position) @addInput)
(<shown?> @addInput)
Now, since rings can contain scripts of multiple blocks, it's very much possible to do that here.
({move (10) steps
say [Hello!]} @addInput)
({move (10) steps
say [Hello!]} @addInput)Rings can also have input names
({} input names: ((#1)) ((#2)) @delInput @addInput)
({} input names: ((#1)) ((#2)) @delInput @addInput)Alternate block labels
Some blocks have alternate ways of writing them.
when @greenFlag clicked
when flag clicked
when gf clicked
when green flag clicked
turn @clockwise (15) degrees
turn @turnRight (15) degrees
turn cw (15) degrees
turn right (15) degrees
turn @counterclockwise (15) degrees
turn @turnLeft (15) degrees
turn ccw (15) degrees
turn left (15) degrees
pause all @pause
pause all
when @greenFlag clicked when flag clicked when gf clicked when green flag clicked turn @clockwise (15) degrees turn @turnRight (15) degrees turn cw (15) degrees turn right (15) degrees turn @counterclockwise (15) degrees turn @turnLeft (15) degrees turn ccw (15) degrees turn left (15) degrees pause all @pause pause all
Some blocks also have some special symbols in them that aren't on most keyboards, so there are some shortcuts
<[] ≤ [] @delInput @verticalEllipsis @addInput>
<[] \<= [] @delInput @verticalEllipsis @addInput>
<[] ≥ [] @delInput @verticalEllipsis @addInput>
<[] \>= [] @delInput @verticalEllipsis @addInput>
(atan2 () ÷ ())
(atan2 () / ())
(() × () @delInput @verticalEllipsis @addInput)
(() x () @delInput @verticalEllipsis @addInput)
The backslash is important because it tells Snap to not close the block.
<[] ≤ []> <[] \<= []> <[] ≥ []> <[] \>= []> (atan2 () ÷ ()) (atan2 () / ()) (() × () @delInput @verticalEllipsis @addInput) (() x () @delInput @verticalEllipsis @addInput)
Define block
Custom blocks are an essential part of Snap!, formerly known as BYOB, Build Your Own Blocks.
Snap! block prototype
The Snap! block prototype (or some might say, define block) is created as such.
{+ custom + block +} :: define
{+ custom + block +} :: defineThe plus signs are optional but are what Snap! has by default. If you don't want to type in the plus signs manually, you can use :: define+ instead.
{+ custom + block +} :: define+
{+ custom + block +} :: define+When you define a block, you can use any shape or category, and the block will be automatically detected if used later (except it won't set the shape).
<predicate :: motion> :: define+
<predicate>
<predicate :: motion> :: define+ <predicate>
Custom blocks can have inputs, which can be added by adding upvars, the same way that they are shown in Snap!
{block ((string)) ((number #)) ((boolean ?)) ((default = hi)) :: looks} :: define+
block [string] (5) <> [hi]
{block ((string)) ((number #)) ((boolean ?)) ((default = hi)) :: looks} :: define+
block [string] (5) <> [hi]You can also set inputs using their input syntax.
{block [string] (number) <boolean> :: looks} :: define+
block [string] (5) <>
{block [string] (number) <boolean> :: looks} :: define+
block [string] (5) <>Scratch define
The Scratch define block can be created by typing the word define and then the custom block within curly brackets.
define {custom block [string] (number) <boolean>}
custom block [] () <>
define {custom block [string] (number) <boolean>}
custom block [] () <>Multiline blocks
Snap! allows for placing newlines in blocks, which can be created like so.
In a command block, you have to either place a backslash \ before a newline or use \n.
multiline \
block \n cool
multiline \ block \\n cool
Reporters and predicates are easier because you can just hit enter.
(multiline
reporter)
<multiline
predicate>
(multiline reporter) <multiline predicate>
However, you cannot put multiple inputs vertically on the same line, like in the (pipe [] @arrowRight (() @addInput) @delInput @verticalEllipsis @addInput) block.
Multiline input
As you may know, you can create a multiline input in Snap! Thankfully it's similar to creating multiline reporters and predicates.
multiline [multiline
text]
multiline [multiline text]
Make sure not to indent multiline inputs, as all spaces are shown within an input.
Comments
Comments can be added on blocks or by themselves, by typing // and then the comment text.
// Comment
block // comment
// Comment block // comment
You can create multiline comments by enclosing them within /* text */.
/* multiline
comment */
multiline /* block
with comment */
/* multiline comment */ multiline /* block with comment */