Charat Avatar Creator

A web app to create custom avatar characters. Choose from multiple avatar generators (Chibi, Kawaii, Genesis, Dressup, BigBang, and more) to design your avatar. Free, no signup, no data collection.

Tech Stack

Category	Technology
Framework	React 19
Routing	React Router DOM 7
Build	Vite 7
Language	TypeScript 5.9
Styling	Tailwind CSS 3, PostCSS, Autoprefixer
Compression	pako
Linting	ESLint 9, TypeScript ESLint
Package Manager	Bun

Getting Started

Prerequisites

• Node.js 18+
• Bun (required for the compress-data build step)

Install

bun install

Development

bun run dev

Build

bun run build

The build pipeline:

1. Compresses JSON data (bun run compress-data or node scripts/compress-data.ts)
2. Type-checks with TypeScript
3. Bundles with Vite

Preview Production Build

bun run preview

Project Structure

charat/
├── public/           # Static assets (logos, chara SVGs, manifest)
├── src/
│   ├── components/   # Shared UI (ColorPickerPanel, DownloadModal, etc.)
│   ├── data/        # Charat data, JSON definitions, parse cache
│   ├── hooks/       # useCharat, useZoomPan, useCharatData
│   ├── pages/       # Home + per-generator creator pages
│   ├── types/       # TypeScript types
│   └── utils/       # shareUtils, etc.
├── scripts/         # compress-data.ts
└── dist/            # Production build output

Available Generators

• Chibi, Kawaii, Kawaii2
• Genesis, Genesis2, BigBang
• Dressup, Dressup2
• Origin, Blanc, Rouge
• Nyanko, Bowl, Dash, Front, Front2
• Mono, Jakigan, Ushiro, Profile

License

MIT – see LICENSE for details.