One idea. Five implementations.

How to use this guide

Start with Hello World under Simple examples. Choose an implementation above the live panel and compare its result with the actual code shown alongside it. Each lesson introduces one small step: Hello World declares a heading; Data binding compares live updates with focus-out updates using two independent textbox and heading pairs.

Learn the setup once

The Overview branches show the reusable startup and host integration for each version. Shared infrastructure explains the frame and tools used by the whole comparison. This setup stays here so that lesson code can focus on the example.

Read and experiment

Source is shown in CodeMirror and is read-only. The Gramlot JS lesson is also a laboratory: edit its recipe, press Run, and use Reset to restore the original. Changes are local to the browser and are not saved to files.

Compare the same behavior

Each version uses its own framework’s conventions. Keep page code, reusable setup and shared tools distinct when comparing authoring. A static Hello World is a starting point, not a performance or reactivity benchmark.