Guide introduction

backend/templates/overview.html

<section class="lesson-intro">
  <p class="eyebrow">Overview · Start here</p>
  <h1>One idea. Five implementations.</h1>
  <p>Explore the same small examples in Gramlot Python, Gramlot JS, React, Vue and NiceGUI.</p>
</section>
<section class="overview-prose">
  <h2>How to use this guide</h2>
  <p>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.</p>
  <h2>Learn the setup once</h2>
  <p>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.</p>
  <h2>Read and experiment</h2>
  <p>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.</p>
  <h2>Compare the same behavior</h2>
  <p>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.</p>
  <a class="start-lesson" href="/pages/hello-world/">Start Hello World →</a>
</section>