Quick Start - Kid Pix User Guide

Table of Contents

TODO

  • simplify quick-start, and make a more comprehensive User Manual to base e2e tests on

What is Kid Pix?

Kid Pix is a fun digital painting program from 1989. Due to version 1.0 being generously released to the public domain, it was re-implemented in 2021 in HTML / Javascript by GitHub user vikrum, here and hosted at https://kidpix.app, under the name "JS Kid Pix". I forked this version to make minor customizations for my kids, and also to practice software development

1.0 was released in Nov 1989 into the (Q: what to call my version of it?) is a playful digital painting program that recreates the magic of the classic 1989 Kid Pix software. It's designed for creative expression with whimsical tools, sound effects, and delightful surprises. Whether you're 8 or 80, Kid Pix encourages experimentation and fun over precision.

Getting Started

The current repo (https://github.com/justinpearson/kidpix) is deployed via Github Pages here:

  • Main app: https://justinpearson.github.io/kidpix/app.html
  • Documentation: https://justinpearson.github.io/kidpix/docs.html

This project is a fork of Vikrum's Javascript re-implementation of the original 1989 KidPix 1.0, which he hosts at https://kidpix.app .

Using Kid Pix Locally

  1. Download or clone this repository
  2. Install dependencies and start the development server:
yarn install
yarn dev
  1. Open your browser and go to http://localhost:5173
  2. Kid Pix will load and you can start creating!

Note: You need a web server, not just open index.html in a browser, because the app loads JavaScript modules and audio files that browsers block when opening files directly.

Tools

The main toolbar on the left contains these essential tools:

  • Save Save - Download your artwork
  • Pencil Pencil - Draw lines with various pencil sizes
  • Line Line - Draw straight lines
  • Rectangle Rectangle - Draw rectangles and squares
  • Circle Circle - Draw circles and ovals
  • Brush Brush - Access dozens of creative brushes
  • Mixer Mixer - Apply wild visual effects
  • Paint Can Paint Can - Fill areas with color or patterns
  • Eraser Eraser - Remove parts of your drawing (with fun effects!)
  • Text Text - Add letters and numbers with sounds
  • Stamp Stamp - Place pre-made graphics
  • Truck Truck - Move parts of your drawing around
  • Undo Undo - Undo your last actions (up to 30 steps)
  • Redo Redo - Redo your last undone actions

Click a tool to select it; the currently-selected tool is outlined in red (except for Save, Undo, and Redo, which are not "real" tools, in that they perform a single action when clicked, and cannot be selected).

Of the "real" tools (not Save, Undo, or Redo), clicking a tool selects it, and loads its subtools into the subtool bar across the top of the screen. For example, clicking the Pencil reveals subtools for "thickness" and "pattern". Different tools have different subtools. The currently-selected subtool(s) are indicated via a red outline.

For convenience,

Colors

  • Large colored square in the upper-left is the currently-selected color.
  • The smaller colored squares are a color palette.
  • The arrows ← → change to different color palettes (8 in total).

Pro Tips

  • Hold Shift while using most tools to make them bigger.
  • Try modifier keys (Alt, Ctrl, Cmd) with tools for hidden features.
  • Listen for sounds - each tool has delightful audio feedback.
  • Experiment freely - there's no wrong way to use Kid Pix!