Build Tic Tac Toe from a blank canvas

This is the first complete Hara program in the documentation.

You will begin with an empty browser canvas and build the game in six small parts. Along the way, ordinary Hara values become drawing commands, game rules, current state, pointer input, and a live render loop.

The runnable panels use a real browser-hosted Hara kernel and canvas. The examples are not screenshots, pseudocode, an iframe, or a reduced teaching runtime.

What you will build

By the end, the program will have:

• a board described as visible command data;
• a small multi-file project shape;
• immutable game values and legal-move rules;
• an atom for the current game;
• pointer events translated into possible moves;
• rendering functions that return canvas commands;
• a live frame loop with reset and touch input.

The important progression is:

data → rules → state → input → rendering → running program

Each part introduces one new boundary without replacing the model used in the previous part.

01 · DRAW

blank canvas↓line commands↓board

Turn ordinary values into visible output.

02–04 · DESCRIBE

files↓state + rules↓pointer

Keep the game understandable as it grows.

05–06 · RUN

commands↓next frame↓play

Connect the program to the browser and play it.

Build it in order

Part IDraw the boardCanvas commands and a focused drawing practical. Part IIOrganise the gameThree small files with clear responsibilities. Part IIIState and rulesImmutable game data and legal moves. Part IVPointer inputTurn a local event into one possible move. Part VRenderingTranslate the game into canvas commands. Part VIMake it liveFrames, reset, touch input, and the finished game.

Follow the parts in order for the full construction. Each page also includes a focused practical, so you can pause and change the program before moving on.

What comes after the game

Once the game is running, the same language can move into a larger browser project, local CLI project, editor-connected session, native host, or JVM application.

Continue with Choose your Hara setup to decide where your own project should live, or take the Hara language course to go deeper into streams, coroutines, bytes, and I/O.