Tutorial: Build Tic-Tac-Toe

Build a complete, interactive tic-tac-toe game step by step. You'll learn the core concepts of What Framework while building something real.

Preview of finished game
X
O
X
X
O
O
X

Winner: X

This is what you'll build by the end of this tutorial.

What You'll Learn

By the end of this tutorial, you'll understand:

  • Signals — Reactive state that updates the UI automatically
  • Computed values — Derived state that stays in sync
  • Components — Reusable pieces of UI
  • Event handling — Responding to user interactions
  • Lifting state — Sharing state between components

Prerequisites

You should be familiar with:

  • Basic HTML and CSS
  • JavaScript fundamentals (functions, arrays, objects)
  • A text editor (VS Code, Sublime, etc.)

Experience with React or other frameworks is helpful but not required.

How to Follow Along

You have two options:

Option 1: Build Locally

Create a new project and follow along step by step. Best for learning.

Option 2: Read Through

Read the tutorial to understand the concepts. Come back to build later.

The Plan

We'll build this game in stages:

1

Setup

Create the project and get a basic app running.

2

Building the Board

Create the game board UI with squares and a grid layout.

3

Adding State

Use signals to track the game state (X, O, empty for each square).

4

Taking Turns

Alternate between X and O, prevent overwriting moves.

5

Declaring a Winner

Check for winning conditions and display the winner.

6

Time Travel

Add history to revisit previous moves (the advanced part).

Take Your Time

Don't rush through. Each step builds on the previous one. Make sure you understand what's happening before moving on.

Ready?

Let's start by setting up the project.