Example apps

Every block (print, values, variables, math, compare, if/else and repeat) has six elements: a title, an icon, a hint and its code in pseudocode, JavaScript and Python. A picker shaped like a tile sits above the toolbox: ticking a part shows it on every tile, as the app changes the tiles mode while it runs. Hovering over a tile shows the block's elements from definitions.json, only the ticked ones. Each of the two views picks its kind and its language: blocks (a workspace), text (a codespace, editable by structure) or a preview (read only text). Both can be text, or both blocks, the second then read only. The same program follows every switch.

Three themes (Light in the blues of Leibniz University Hannover, Sunrise and Dark) show that the page, the tiles and the text views all take their colors from the app. A short guided tour opens on each visit until "Don't show again" is ticked, and the Tour button brings it back. main.ts is the whole setup with one mount call; the explorer and the tour live in their own files. Run executes the program and shows what it printed. Copy this app to start your own project.

The page reads like an ordinary blog post. Between the paragraphs sit three figures, one per step: repeat a fixed number of times, count with a variable, and repeat while a condition holds. Each figure has its own tray of blocks, a workspace, a live Python preview and a small output area. It opens with a starter program whose output is already shown, and Run refreshes the output after the reader changes the blocks.

All three are the same <morphic-editor> custom element, built with Lit and configured only by attributes: which blocks its toolbox offers, which program it starts with, its height and its caption. Each instance runs its own Morphic Blocks engine, so the editors stay fully independent, and the tag could be dropped into a CMS, a wiki or a learning platform just like an image. Behaviors turn the blocks into JavaScript with the same meaning as the Python shown, and a loop that never ends is stopped after a thousand rounds.

Nine blocks (print, text, number, math, compare, if, repeat and a variable set and get pair) in two modes: plain words such as "repeat 3 times" and Python. Three presets are the steps: plain word blocks; plain word blocks next to the same program as Python blocks, which come from a second, read only workspace that follows the program after every change; and Python blocks next to Python text that can be edited by structure.

Every step has an Output area with a Run button. A behaviors file turns each block into JavaScript that does what its Python does, so the output matches what Python would print, and loops stop after 1,000 rounds.

Five blocks show only a picture and a number or a color: forward, turn left, turn right, pen color and repeat. The toolbox is a set of big colored tiles to drag onto the workspace, and both float above the drawing paper. The workspace starts with a square, and the drawing can be dragged and zoomed.

Run turns the blocks into JavaScript that calls a turtle (turtle.forward(100), turtle.right(90) and so on). The app runs that code with its own turtle, which writes down every move, and then plays the moves back step by step on the canvas. Children never see code: a small </> button shows parents and teachers the same program in Logo (pen blue, repeat 4 [ forward 100 right 90 ]) in a read only preview view. A program that loops more than 1,000 rounds is stopped with a short message.

Blockly runs hidden and holds the program; people only see and edit text. Snippets from the toolbox are dragged into the code on the left, and values, names and types are changed by clicking them. Each of the two text views has its own language dropdown, and the snippets follow the language on the left.

Sixteen blocks cover printing, values, math, comparisons, variables, if and else, loops and functions. A single type dropdown (number, text, true/false) turns into int, std::string, String, str or nothing at all, depending on the language shown. The code is shown as snippets without a main function. Run turns the program into JavaScript with the same meaning, ignores the types, and stops loops after 1,000 rounds.

A staircase of five levels runs across the top: Output, Variables and math, Decisions, Loops and Functions. Every level keeps the blocks of the levels before it and adds its own, so the toolbox grows with the learner while the language on the blocks stays Python all the way. The newest group of blocks is marked and scrolled into view.

Going back down a level removes the blocks that level does not have yet. A small dialog says how many blocks will go and offers Cancel, Continue and a checkbox to stop asking for the rest of the session.

The Output pane shows what the program prints as soon as it loads, and Run refreshes it. A behaviors file turns each block into JavaScript with the same meaning as its Python: range counts from 0, True and False print as in Python, 10 / 2 prints 5.0, and mistakes show up with Python's error names. Loops stop after 1,000 rounds.

Symbols, Words and Java are modes: they change what a block says. Each level comes as a preset, and a twin preset adds a short explanation under every block in the toolbox. Dropdowns store one value and show it per mode, so the same choice reads "is more than" in words and > in Java. Next to the blocks, a read only view shows the same program in Java, or in plain words when the blocks are Java.

The settings change how everything looks, not what it says: a text size slider (CSS and Blockly's zoom), a dark theme, high contrast with outlined blocks, and OpenDyslexic, served by the app itself. The block colors stay apart for colorblind people, and every block also says in words what it does. Run shows what the program prints and stops loops after 1,000 rounds.

No mouse is needed. Every tile in the toolbox is a button with a name for screen readers, and Enter adds its block after the selected one. Blockly's keyboard navigation plugin moves through the program (W, A, S and D), edits values (Enter) and takes blocks out (X); the skip link at the top leads straight to it. On a touch screen, tiles are dragged sideways or after a long press, so the toolbox still scrolls.

Every block has a title and its text in six languages. Each language is a mode for the toolbox and a pseudocode element that a preset gives to the workspace and the preview, so a switch shows Latin, Greek, Chinese and Arabic script and each language's own quote marks. Dropdown words such as wahr, αληθές, 真 or و come from the per element display map while the stored value stays the same; symbols such as × and ≠ are the stored values themselves.

Arabic turns the blocks, the toolbox tiles and the text right to left while the page layout stays where it is: the host decides where each view sits, the content follows the language. Blockly reads the direction only when it starts, so the app mounts the engine again and carries the program over with serializeWorkspace and loadWorkspace. The page text follows the language too, and Run shows that the program prints the same in every language.

Eleven blocks cover a query, column picks, conditions (compare a number, compare a text, starts with, and/or) and the clauses WHERE, ORDER BY and LIMIT. The blocks read either as plain words ("only rows where moons is above 1") or as SQL, and the text view always shows the SQL. Dropdowns store one value but show it per element, so the same choice reads "is" in words, = in SQL and === in JavaScript. Connection checks let the clauses fit only in SQL's order.

Nothing here runs SQL. Behaviors turn every block into JavaScript that copies, filters, sorts and cuts a plain array of planets, and the app hands that array in and draws the rows as a results grid. A second tab shows the JavaScript that actually runs: the language on screen does not have to be the one that executes.