Guide

How CodeFlow works

What every block does, when to use it, and an example you can open and run. Stuck on something? Search below, or look in Common questions.

Getting started

A program is a set of blocks joined by arrows. It always begins at Start and follows the arrows, one block at a time, until it reaches End.
Each block does one small job: ask a question, show a message, remember a value, make a choice or repeat something.
Blocks run in the order the arrows go, not the order you added them.

Tap a block in the Blocks list to add it after the selected block, or drag it onto the canvas.
To join two blocks, drag from the dot at the bottom of one block to the other block. Let go on empty space to pick a new block to put there.
Click the + on any arrow to slip a new block in between.
Click a block to change what it does in the panel on the right. Press Delete to remove it.
Auto layout lines blocks up for you. Switch to Free move to drag them wherever you like.

Run plays the whole program. Step runs just one block, so you can watch it think. Reset starts over.
Pick 🐢 Slow, 🚶 Normal or ⚡ Fast to choose how quickly it runs.
The Output tab shows everything your program says, and your answers. Values shows what each value holds right now. Steps lists every block that ran.
The block that is running glows. If something goes wrong, the block turns red and FlowBot explains what happened.

Examples, challenges and new programs each open in their own tab, like a web browser. Use Side by side to see two at once, for example a challenge next to an example.
Save keeps your program on this device. Find it again under ▾ → Load Project. Open tabs also come back if you refresh the page.
A tab with an amber dot has changes that aren't saved. CodeFlow asks before closing it.
View Code shows your program as real JavaScript, the language of the web.

Tap a block to see what it does, what to fill in, and an example you can try.

Start

Talk

Values

Decide

Repeat

Lists

Finish

Many boxes take a value: a number, some text, a name, or a sum that works one out.

Numbers are typed plainly: 7, 3.5, -2.
Text goes in double quotes: "hello". Single quotes don't work.
Value names are one word, with no quotes: score, firstName.
true and false are the answers to yes-or-no questions.
Lists go in square brackets: ["red", "blue"], or [] for an empty one. colours[1] is the first item.

Symbols
Symbol	Means	Example
`+`	add numbers, or join text	`3 + 4` is 7, `"Hi " + name`
`- * /`	take away, times, divide	`10 / 4` is 2.5
`%`	remainder after dividing	`10 % 3` is 1
`== !=`	is equal to, is not equal to	`answer == 42`, `colour != "red"`
`> < >= <=`	bigger, smaller, at least, at most	`age >= 13`
`&&`	and: both must be true	`age >= 13 && age <= 19`
`\|\|`	or: at least one is true	`day == "Sat" \|\| day == "Sun"`
`!`	not: flips true and false	`!contains(word, "a")`
`( )`	work this part out first	`"Sum: " + (a + b)`

Use them in any box, like round(price, 2).

round(number) or round(number, digits): Rounds to the nearest whole number, or to that many decimal places.
floor(number): Rounds down to a whole number.
ceil(number): Rounds up to a whole number.
abs(number): Makes a number positive: abs(-5) is 5.
sqrt(number): Square root: sqrt(16) is 4.
power(number, times): Multiplies a number by itself: power(2, 3) is 8.
min(a, b, …) or min(list): The smallest of some numbers, or of a list.
max(a, b, …) or max(list): The biggest of some numbers, or of a list.
random(lowest, highest): A random whole number between the two, including both.
length(list or text): How many items are in a list, or letters in some text.
upper(text): The text in CAPITAL letters.
lower(text): The text in small letters.
contains(list or text, thing): True if the list has that item, or the text has those letters: contains("hello", "ell").
join(list) or join(list, between): Turns a list into text: join(["a", "b"]) is "a, b".