apps.json

{
  "$comment": [
    "Single source of truth for the playground: every app listed here exists in apps/<id>/ and is built and shown in the gallery.",
    "`id` is immutable: it is the folder name under apps/, the URL segment, and the key used to derive the GitHub and CLI links.",
    "Build output is assumed to be 'dist'; add \"outDir\" only when the toolchain differs (e.g. Next.js static export writes to 'out')."
  ],
  "apps": [
    {
      "id": "starter",
      "name": "Get Started",
      "description": "The place to get familiar with Morphic Blocks: choose what the toolbox tiles show, and turn each of two views into blocks, text or a preview in pseudocode, JavaScript or Python.",
      "details": "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.\n\nThree 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.",
      "useCase": "Starting point",
      "question": "What is Morphic Blocks made of?",
      "framework": "none",
      "language": "typescript",
      "bundler": "vite",
      "packageManager": "npm",
      "styling": "css",
      "views": [
      "blocks",
      "text",
      "preview"
    ],
      "codeShown": [
      "JavaScript",
      "Python",
      "Pseudocode"
    ],
      "preview": null
    },
    {
      "id": "embed-anywhere",
      "name": "Embed Anywhere",
      "description": "A friendly tutorial article about loops with three small block editors placed between its paragraphs, each one the same reusable web component with a live Python preview and a Run button.",
      "details": "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.\n\nAll 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.",
      "useCase": "Embedding in any page",
      "question": "Can I put it into any page?",
      "framework": "lit",
      "bundler": "vite",
      "packageManager": "pnpm",
      "styling": "css",
      "views": [
        "blocks",
        "preview"
      ],
      "codeShown": [
        "Python"
      ],
      "preview": null
    },
    {
      "id": "block-to-text",
      "name": "Block to Text",
      "description": "One Python program moves step by step from plain word blocks to Python blocks to Python text, and Run shows what it prints.",
      "details": "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.\n\nEvery 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.",
      "useCase": "Block to text transition",
      "question": "How do learners move from blocks to text?",
      "framework": "react",
      "bundler": "vite",
      "packageManager": "bun",
      "styling": "css-modules",
      "views": [
        "blocks",
        "text"
      ],
      "codeShown": [
        "Python"
      ],
      "preview": null
    },
    {
      "id": "turtle-drawing",
      "name": "Turtle Drawing",
      "description": "Picture blocks with no words steer a turtle that draws on a big canvas, so even children who cannot read yet can program a drawing.",
      "details": "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.\n\nRun 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.",
      "useCase": "Blocks that drive a drawing",
      "question": "Can blocks drive something else, like a drawing?",
      "framework": "svelte",
      "bundler": "vite",
      "packageManager": "yarn",
      "styling": "tailwind",
      "views": [
        "blocks",
        "preview"
      ],
      "codeShown": [
        "Logo (turtle)"
      ],
      "preview": null
    },
    {
      "id": "side-by-side",
      "name": "Side by Side",
      "description": "Programs are built entirely in text, with no blocks on screen, and the same program can be read side by side in Go, C++, Java, Python and JavaScript.",
      "details": "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.\n\nSixteen 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.",
      "useCase": "Text only editing",
      "question": "Does it work without visible blocks?",
      "framework": "vue",
      "bundler": "rsbuild",
      "packageManager": "npm",
      "styling": "scoped",
      "views": [
        "text",
        "preview"
      ],
      "codeShown": [
        "Go",
        "C++",
        "Java",
        "Python",
        "JavaScript"
      ],
      "preview": null
    },
    {
      "id": "level-up",
      "name": "Level Up",
      "description": "One language, Python, at every level: the toolbox grows from print and values to variables, decisions, loops and functions, and Run shows what the program prints.",
      "details": "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.\n\nGoing 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.\n\nThe 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.",
      "useCase": "Learning in levels",
      "question": "Can the toolbox grow with the learner?",
      "framework": "solid",
      "bundler": "vite",
      "packageManager": "bun",
      "styling": "css",
      "views": [
        "blocks"
      ],
      "codeShown": [
        "Python"
      ],
      "preview": null
    },
    {
      "id": "accessible-blocks",
      "name": "Accessible Blocks",
      "description": "The same program as symbols, plain words or Java, with settings for text size, a dark theme, high contrast, a font for dyslexia and explanations on every block, all usable with the keyboard or a finger.",
      "details": "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.\n\nThe 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.\n\nNo 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.",
      "useCase": "Accessibility",
      "question": "Can blocks adapt to how people see and read?",
      "framework": "preact",
      "bundler": "esbuild",
      "packageManager": "bun",
      "styling": "bootstrap",
      "views": [
        "blocks",
        "preview"
      ],
      "codeShown": [
        "Java",
        "Plain words"
      ],
      "preview": null
    },
    {
      "id": "many-languages",
      "name": "Many Languages",
      "description": "The same twelve blocks speak English, Deutsch, Español, Ελληνικά, 中文 and العربية: pick a language and the blocks, the toolbox and the pseudocode change while the program stays.",
      "details": "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.\n\nArabic 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.",
      "useCase": "Localization and right to left",
      "question": "Can the same blocks speak the learner's language?",
      "framework": "next",
      "bundler": "next",
      "packageManager": "npm",
      "styling": "sass",
      "views": [
        "blocks",
        "preview"
      ],
      "codeShown": [
        "Pseudocode in 6 languages"
      ],
      "preview": null,
      "outDir": "out"
    },
    {
      "id": "query-builder",
      "name": "Query Builder",
      "description": "Blocks build a database query over a small table of planets and the text view shows it as real SQL, while Run quietly executes JavaScript with the same meaning and shows the rows as a table.",
      "details": "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.\n\nNothing 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.",
      "useCase": "Output that is not JavaScript",
      "question": "Can blocks write something other than a program?",
      "framework": "none",
      "language": "typescript",
      "bundler": "vite",
      "packageManager": "deno",
      "styling": "css",
      "views": [
        "blocks",
        "text"
      ],
      "codeShown": [
        "SQL"
      ],
      "preview": null
    }
  ]
}