Quickstart

Prerequisites

Before you start, make sure you have:

• A KidsBuild account (13+ with parent approval)
• Node.js 18+ installed on your computer
• A code editor (VS Code, Cursor, or similar)

Step 1: Create Your App

The fastest way to get started is with our CLI. Open your terminal and run:

This will create a new folder called my-awesome-game with everything you need to start building.

Step 2: Start Development

Navigate into your new project and start the development server:

Open http://localhost:3000 in your browser. You should see your app running with a simple welcome screen.

Step 3: Log In to KidsBuild

To test your app with real KidsBuild features (like user accounts and wallets), you need to authenticate:

This opens a browser window where you can sign in with your KidsBuild account. Once authenticated, your local development environment can access the platform APIs.

Step 4: Edit Your App

Open src/App.tsx in your editor. Here's what the starter code looks like:

import { KidsBuild, useUser, useWallet } from '@kidsbuild/sdk'

export default function App() {
  const user = useUser()
  const wallet = useWallet()

  return (
    <KidsBuild>
      <div className="app">
        <h1>Welcome, {user?.displayName || 'Builder'}!</h1>
        <p>You have {wallet?.buildBucks || 0} BuildBucks</p>
        
        {/* Your app goes here */}
      </div>
    </KidsBuild>
  )
}

The KidsBuild wrapper provides your app with access to user data, wallet balances, and state management. Try changing the welcome message and watch it update in your browser instantly.

Step 5: Add State

Most apps need to save data. KidsBuild provides a simple state system that persists data for each user:

import { useAppState } from '@kidsbuild/sdk'

export default function App() {
  const [score, setScore] = useAppState('score', 0)
  
  return (
    <div>
      <p>Your score: {score}</p>
      <button onClick={() => setScore(score + 1)}>
        Click me!
      </button>
    </div>
  )
}

The useAppState hook automatically saves and loads data for each user. When they come back later, their score will still be there.

Step 6: Publish Your App

Ready to share your app with the world? First, build it for production:

Then publish to KidsBuild:

This uploads your app to KidsBuild and submits it for review. Once approved, it will appear in the marketplace for other kids to play!

Using Claude Code or Cursor

If you're using an AI coding assistant, check out our Prompt Library for copy-paste prompts that help you build faster. Here's a quick example:

I'm building a KidsBuild app. Help me create a simple clicker game where:
- Users click a button to earn points
- Points are saved using useAppState
- There's a leaderboard showing top scores
- The UI uses Tailwind CSS

Use the @kidsbuild/sdk for state management and user info.
The app should be in src/App.tsx.

Next Steps

• SDK Reference -- Full documentation for all SDK features
• AI Prompts -- Copy-paste prompts for common tasks
• Database Guide -- Learn about persistent storage
• Publishing Guide -- Detailed publishing workflow