A fun, interactive typing application designed for kids with sound effects, text-to-speech, and visual feedback. Built with Vue 3 and modern web technologies.
- Start typing in the input field at the bottom
- Hear each letter as you type (if speech is enabled)
- Press Enter to complete a line and hear it spoken
- View your history in the scrolling area above
When Typey is running locally, every completed line can also take over a Tidbyt for ten seconds. Rendering and pushing live in a separate local service, tidbyt-api, which holds the API key; the browser never sees it.
- Start tidbyt-api (
npm startin that repo; its README covers setup and the optional Minecraft recipe mode). It listens on127.0.0.1:8173. - Run
npm run devhere, open the local URL, type a line, and press Enter. The dev server forwards/api/tidbytto the service. If the service is not running, lines are still typed and the request quietly returns 503.
To use the deployed site with the same bridge, keep tidbyt-api running and
open https://typey.site/?tidbyt=local. The query parameter is an
explicit opt-in: without it, the production site never contacts localhost.
Chrome and other Chromium browsers support this HTTPS-to-loopback flow. Safari
may block the plain-HTTP loopback request as mixed content.
Typey reports a handful of anonymous events to PostHog so it is possible to see
which easter eggs and settings children actually use. It is off unless
VITE_POSTHOG_PROJECT_TOKEN and VITE_POSTHOG_HOST are set (see
.env.example); without them nothing is loaded or sent, locally or in
production.
When it is on:
- Never what was typed. Events carry only names chosen by the app — which
easter egg played, which setting changed, which control was pressed — plus
visible time on the page, load timing, and an error's class name. A property
allowlist in
src/features/analytics/properties.jsdrops anything else the app tries to send. - Only PostHog's standard context on top. The SDK adds the page path,
parsed browser and OS, screen size, timezone and per-page-load IDs, plus its
own pageview. A
before_sendhook strips query strings from every URL, drops the raw user-agent string and full referrer URLs, and never sets person properties. - No identity. No cookies or local storage, no person profiles, no
identify(). Each page load is a new anonymous visitor. Do-Not-Track is respected. - No recording. Autocapture, session replay, heatmaps, surveys and PostHog's extra scripts are all off.
Turn on Discard client IP data in the PostHog project settings too; IP handling happens on PostHog's side and the browser SDK cannot switch it off.
- ✨ Words - browse the whole typing dictionary, search it, tap any word to watch what it does
- ⚙️ Settings → 🤫 Secret Words - the typed triggers on their own, each with a line saying what it does, so they can be found again without scrolling the dictionary
- 🎵 Sound Toggle - Enable/disable keystroke sounds
- 🗣️ Speech Toggle - Enable/disable text-to-speech
- 🔄 Auto-Speak Toggle - Automatically speak completed lines
- ⇪ Caps Lock - Force uppercase typing (the title, prompt and settings follow it too)
- Enter - finish the line and set off its animation
- ↑ - bring the last line back into the input to fix a typo
- ⌘→ / ⌘← - skip to the next practice word, or go back to the one before
- Escape - pop every balloon, stop Silly Mode and Party Mode, wake night mode, and clear the battery
- Click any completed line to hear it spoken again
- Watch progressive highlighting as words are spoken
- Scroll through your typing history
- Desktop browsers - Full speech synthesis support
- Mobile browsers - Limited but functional
- macOS Safari - Requires user interaction for speech
- Real-time typing with visual feedback
- Sound effects for each keystroke
- Caps Lock mode for uppercase typing
- Practice prompts - a word to copy, with each letter turning red as it's spelled right; the first wrong letter turns blue, and a different first letter means you're typing something else, so nothing lights up at all
- Colour words wash the screen - type "red" and the whole page turns red until you send the next line
- Motion that matches meaning - animals run (and turn to face the way they're going), food is thrown and falls back, weather rains, balloons float
- Emoji families - typing a generic word like "ball" or "tree" mixes related glyphs; specific words like "soccer" stay a single picture
- Emoji Mode - every letter, digit and symbol draws as a matching emoji (A → 🍎, B → 🐻); speech still reads the real words
- Silly Mode - type "silly" to have five random words send themselves, three seconds apart, each with its own animation; Escape (or "silly" again) stops them
- Color Mode - type "color" (or "colour", or "rainbow") to paint every character a different rainbow color; type it again to go back to plain text
- Goodnight / night mode - type "goodnight" (or "good night") to put the page to bed: a deep indigo sky with a moon and slowly twinkling stars. "black", "dark", "moon", and "night" also open night; "good morning", "light", "sun", "morning", "sunrise", "day", "daytime", and "noon" wake it. Colour Mode and the screen-colour washes stay off while it lasts; type "goodnight" again (or press Escape) to wake it up
- Percent Battery - type
50%(or any percent from 0-9999) to charge a battery to that much; it then parks in the corner like a phone's charge indicator and loses a point with every key you press. Hitting 0% — typed, drained, or from an equation — opens night mode instead of a separate blackout. Over 100% the charge bursts out of the battery and the screen fills with lightning - Overcharged - past 1000% the screen's frame runs with electricity; each keystroke spends 100 charge, and about one in five shows a bolt that eats the letter you just typed, until the charge is spent back under the line
- Equation modifiers - put a
$or%on either side of a sum (2 + 3$,20 + 30%) and the answer arrives in those units: five bills raining, or a battery charged to 50%. Mix them and the last one typed wins - Auto-scroll to keep content in view
- Letter-by-letter speech as you type
- Line-by-line speech when you press Enter
- Historical line playback - click any completed line to hear it spoken
- Progressive highlighting - see words highlight as they're spoken
- Cross-platform compatibility - works on macOS, Windows, and mobile
- Modern, clean interface with smooth animations
- Responsive design that works on all devices
- Accessibility features for inclusive use
- Customizable themes and styling
- Intuitive controls with clear visual feedback
- Hover effects and smooth transitions
- Keyboard navigation support
- Mobile-friendly touch interactions
Made with ❤️ for kids learning to type!