Chatter

Chatter is a fully client-side tool for building fake chat conversations and exporting them as screenshots — handy for clue handouts, red herrings, and other tabletop RPG props. It can render the same conversation as a modern WhatsApp-style bubble thread, a late-90s Nokia SMS screen, or a Windows 95-era AIM window. Everything runs in the browser: there's no backend, no accounts, and no data ever leaves your machine (conversations autosave to localStorage).

Examples of the kind of PNG the app exports — the actual "Download PNG" output for the default conversation above, in each style:

Features

Header

• A conversation switcher dropdown to create, rename, duplicate, switch between, or delete conversations. Creating or renaming opens a small dialog that suggests a sensible default name (Conversation, Conversation (2), etc.), and reuses the same dialog for both actions
• A settings (gear) menu for app-wide config: Light / Dark / Auto editor theme, and Export/Import a conversation as a .json file (handy for backups or moving a conversation to another machine)

Editor (left panel, sections independently collapsible)

• Chat settings — a Style selector switches the whole preview between Modern, Nokia, and AIM (see Preview below), 12-hour vs 24-hour time format, a Screen height control (Auto sizes the phone frame to fill the preview panel; Custom pins it to an exact pixel height, via a numeric input that's only enabled in Custom mode), and — for Modern and Nokia only, since it's a phone-screen concept AIM has no equivalent for — a nested Status bar subsection covering time, battery, and signal, plus a few fields specific to the active style: Modern adds a "Show" toggle, iOS/Android platform, Wi-Fi, and carrier; Nokia adds an operator name and, in place of the "Show" toggle, a Message shown control — Previous/Next buttons with a "2/3"-style counter (see Preview below for why)
• Participants — add/remove people, set each one's avatar color or upload a photo, mark which participant is "me" (outgoing messages), toggle group chat, and toggle the recipient's online/offline status shown in the header
• Messages — add text messages, image/voice placeholders, reply-to quoting, emoji reactions, and per-message delivery status (Sent/Delivered/Read). New messages default to the previous message's timestamp, and new "me" messages default to Read status, since these are usually completed conversations being staged for a screenshot. Timestamps are edited with a native time picker and formatted per the Chat settings time format

Preview (right panel) — three selectable chat styles, all driven by the same conversation/message data:

• Modern — a live phone-frame mockup styled after WhatsApp: bubbles, avatars, reactions, reply quoting, and delivery ticks
• Nokia — a single-message "read" screen styled after a late-90s Nokia 3310, in the Nokja Original Small Bold pixel font at its native 30px size on a textured green LCD background. Real Nokia phones displayed one SMS at a time rather than a scrolling thread, so there's no way to show a whole conversation on-screen at once — that's what the Message shown Previous/Next buttons in Chat settings are for: they pick which message in the conversation the Nokia screen is currently displaying. The message body is capped at 6 lines to match the phone's tiny display, truncating with an ellipsis if it runs longer
• AIM — a decorative recreation of a Windows 95-era AOL Instant Messenger window ("Instant Messager", no icon, no menu bar, just a close button): a navy title bar, beveled grey chrome, and a white message transcript showing the full conversation in the classic "Name: message" format — your name in red, the other participant's in blue. The textbox and Send button at the bottom are non-functional, matching the rest of the app's decorative compose bars
• Print-friendly render mode — switches any style to a black & white printout look (Modern: outlined bubbles, no color fills; Nokia: flat white background, black text, no LCD texture or drop shadow; AIM: white throughout, black text and window borders, the 3D bevels collapsing to flat outlines) for handouts meant to be physically printed or photocopied
• A prominent one-click PNG export at high resolution (via html-to-image)

Persistence

• All state autosaves to localStorage — refreshing the page won't lose your work

Fonts

Nokia style uses Nokja Original Small Bold, a pixel-accurate reproduction of the Nokia 3310's on-screen font, self-hosted as a .woff2 under src/assets/fonts/nokja/. It's MIT-licensed — see src/assets/fonts/nokja/LICENSE for the full license text and copyright notice.

Tech stack

• Vite + React + TypeScript
• Tailwind CSS v4 for styling
• Zustand (with its persist middleware) for state
• html-to-image for PNG export
• Vitest + React Testing Library for tests

Getting started

npm install
npm run dev

Then open the printed local URL in your browser.

Other scripts

npm run build    # type-check and produce a production build in dist/
npm run preview  # serve the production build locally
npm run test     # run the test suite
npm run lint     # lint with oxlint

Deployment

npm run build produces a static dist/ folder — the whole app is client-side, so it can be hosted on any static file host (GitHub Pages, Netlify, Vercel, a plain FTP server, etc.) with no server-side configuration. All asset paths are relative, so you can upload the contents of dist/ into any folder — root or a subdirectory — without needing to change any config to match.