Code by building

AI Coding
for Kids

Go from an idea to working code. Start with a project, describe what you want to build, and work with Otto to create, test, fix, and improve it.

Start building free See starter projects

Runs in the browser · Nothing to install · Every build saves to Projects

asteroid-dodge · v2Run

Game.jsx

1function Game() {
2  const [score, setScore] = useState(0);
3  const speed = 2 + score / 10;
4 
5  useEffect(() => {
6    const tick = setInterval(() => {
7      moveAsteroids(speed);
8      setScore((s) => s + 1);
9    }, 16);
10    return () => clearInterval(tick);
11  }, [speed]);
12 
13  return <Canvas ship={ship} />;
14}

Preview

SCORE 128HI 342

Inside HeyOtto Code

Everything a young coder needs, in one place

Start a build, come back to it tomorrow, and see how far it has come. Each part of HeyOtto Code connects to the next.

Build
Games
Arcade games, quizzes, puzzles and card games kids design, code and keep upgrading.
Explore games
Build
Apps
Trackers, timers, drawing tools and dashboards: small apps kids actually use.
Explore apps
Build
Projects
Every build auto-saves. Reopen, remix and upgrade the same project instead of starting over.
How Projects works
Build
Starter projects
Small builds sized to finish in one sitting, each tied to a coding concept.
Browse starters
Learn
Learn
The coding concepts behind every build, from loops and state to debugging.
Start learning
Learn
AI coding
What AI coding is, how Otto helps without doing the thinking, and how kids learn to prompt well.
Read the guide
Ages 8–12
Coding for kids
First games, guided starters, and Otto explaining every step.
For kids
Ages 13–18
Coding for teens
React, real apps, and a portfolio worth showing.
For teens

How it works

Idea, build, break, fix, upgrade

The same loop professional developers use, sized for a first session that ends with something on screen.

Start building free

asteroid-dodge · newPlanning

Game.jsx

1// asteroid-dodge
2// A ship that dodges falling asteroids.
3// Score goes up the longer you survive.
4 
5function Game() {
6  // Otto and I build this next
7}

Preview

Nothing to run yet

I want a game where a ship dodges asteroids.

Love it. What should make it harder the longer you play?

A game, app, website or tool you actually want to make.

Otto helps create a first version you can run and play right away.

Open the real code, ask what each part does, and change it.

When something breaks, find out why and fix it together.

Add a feature to the same project. It saves to Projects for next time.

Starter projects

Pick a project. Learn the concept inside it.

Each starter is small enough to finish in one sitting and big enough to keep growing.

Start a starter project

asteroid-dodge.jsxGame
Asteroid Dodge
Pilot a ship, dodge obstacles, and beat your high score.
You'll learn
- loops
- collision logic
- game state
quiz-battle.jsxGame
Quiz Battle
Turn any topic you love into a trivia game.
You'll learn
- arrays
- randomization
- scoring
habit-streak-tracker.jsxTool
Habit Streak Tracker
Track habits with streak counters and progress bars.
You'll learn
- state updates
- persistence basics
pixel-drawing-app.jsxCreative
Pixel Drawing App
A mini art tool with colors and brush controls.
You'll learn
- events
- input handling
- UI controls
flashcard-race.jsxSchool
Flashcard Race
Turn school topics into a fast study game.
You'll learn
- timers
- conditional feedback
mood-music-generator.jsxCreative
Mood + Music Generator
Match moods to playlists and visual themes.
You'll learn
- data mapping
- component-based UI

See all starter projects

Real code

Real code, not toy blocks

Kids write and edit the same HTML, CSS, JavaScript and React that developers use. Otto explains the code instead of hiding it, so kids can read it, change it, and understand why it works.

Streak.jsx

1<p id="score">Score: 0</p>
2<button onclick="jump()">Jump</button>
3 
4<script>
5  let score = 0;
6  function jump() {
7    score = score + 1;
8  }
9</script>

Plain HTML with inline CSS and JavaScript

1<div class="grid h-screen place-items-center">
2  <h1 class="text-4xl font-bold">
3    Quiz Battle
4  </h1>
5  <button class="rounded-full px-6 py-3">
6    Start
7  </button>
8</div>

Utility-first styling for responsive layouts

1function Counter() {
2  const [count, setCount] = useState(0);
3 
4  return (
5    <button onClick={() => setCount(count + 1)}>
6      Clicked {count} times
7    </button>
8  );
9}

Components with hooks like useState and useEffect

1function Streak({ days }) {
2  return (
3    <div className="rounded-2xl p-6 shadow">
4      <p className="text-sm">Current streak</p>
5      <p className="text-5xl font-bold">
6        {days} days
7      </p>
8    </div>
9  );
10}

The recommended combo for richer projectsRecommended

They can build games, interactive apps, web pages, dashboards, data visualizations and animations. New to the concepts? Start with Learn.

Learn coding concepts by using them

As kids build, they encounter:

Variables
Loops
Conditionals
Events
Functions
State
Debugging
Data
User interfaces
Problem solving

Instead of starting with a blank lesson, kids encounter coding concepts because they need them to make something work.

Built-in guardrails

Clear limits keep learning focused and the runtime safe for families.

Every build runs in a sandboxed iframe
No outside scripts or external API calls
No access to browser storage
Self-contained bundles that parents can see

Projects

A portfolio, not a pile of exercises

Every build saves to Projects. Kids reopen the same game, ask for one scoped upgrade at a time, and watch it get better.

asteroid-dodge · v1

First session

Basic ship movement
One obstacle speed
No score yet

asteroid-dodge · v2

A week later

Live scoreboard
Difficulty ramps over time
Power-ups and shield mode

What Projects keeps: Auto-save so no work is lost, every version in one place, and room to refactor as the app grows, the way real software does.

Otto as a coach

Otto asks questions so kids do the thinking

Kids pick the idea, read the code, and decide what to change. Otto explains each step, points out bugs, and asks the questions a good mentor would.

Concepts kids pick up

Loops
Conditionals
State
Debugging
UI
Event handling
Data structures
Prompting

Otto

Coaching on asteroid-dodge

Online

Want me to explain this loop step by step?
I think there is a bug in your collision check. Want to find it together?
If we add a second enemy type, what do we need to keep track of?
That answer might be wrong. Let us run it and see what happens.

For parents

You can see every build

Each project shows up in the parent dashboard, so you know what your kid made, what they asked Otto, and how it changed over time. HeyOtto Code works inside the same family controls as the rest of HeyOtto.

See the parent dashboard Trust Center

Maya's projects

This week

asteroid-dodge
3 sessions · 2 upgrades
v2
quiz-battle
1 session · started Tuesday
v1

Recently asked Otto

“Why does my score reset when I restart the game?”

Sandboxed builds
No outside scripts
Family controls on

FAQ

AI coding for kids, answered

Want the full picture? Read the guide to AI coding for kids.

Kids describe what they want to build, Otto helps write a first working version, and then kids read, change and debug the real code themselves.

No. Otto explains what each part does and asks questions. Kids choose the idea, decide what to change, and fix what breaks.

Yes. Kids work in HTML, CSS, JavaScript and React, with Tailwind for styling. Nothing is hidden behind blocks.

Block-based tools are a great first step. HeyOtto Code uses the same text code developers write, with Otto explaining it, so kids can move past blocks.

Builds run in a sandboxed iframe with no outside scripts or network calls, and every project is visible in the parent dashboard.

HeyOtto Code is built for ages 8 to 18. Younger kids usually start with a starter project; older kids often bring their own idea.

No. Starter projects are sized so a first session ends with something working, and Otto explains as they go.

Yes. Every build saves to Projects, so kids can reopen, remix and upgrade their work over time.

Clear prompts are a real skill. Kids learn to say what should change and what should stay the same, then check the result in the code.

No. HeyOtto Code runs in the browser, so kids can pick up a project on any device they sign in from.

Start free

What will your kid build first?

Pick a starter or bring an idea. The first session ends with something they made, running on screen.

Start building free Browse starter projects

Runs in the browser · Nothing to install · Every build saves to Projects

AI Codingfor Kids

Everything a young coder needs, in one place

Games

Apps

Projects

Starter projects

Learn

AI coding

Coding for kids

Coding for teens

Idea, build, break, fix, upgrade

01Pick an idea

02Build

03Explore the code

04Debug

05Upgrade

Pick a project. Learn the concept inside it.

Asteroid Dodge

Quiz Battle

Habit Streak Tracker

Pixel Drawing App

Flashcard Race

Mood + Music Generator

Real code, not toy blocks

Learn coding concepts by using them

Built-in guardrails

A portfolio, not a pile of exercises

asteroid-dodge · v1

asteroid-dodge · v2

Otto asks questions so kids do the thinking

You can see every build

AI coding for kids, answered

What is AI coding for kids?

Does the AI do the learning for them?

Is this real code?

How is this different from Scratch or Kodable?

Is AI coding safe for kids?

What age can start?

Do kids need to know how to code first?

Can kids keep a portfolio?

How does prompting fit into learning to code?

Do I need to install anything?

What will your kid build first?

AI Coding
for Kids