A simple React web application that accurately counts graphemes in text, including emojis and complex characters.

• Real-time grapheme counting using Intl.Segmenter for accurate results
• Multiple text statistics: graphemes, characters, and words
• Example texts to demonstrate complex grapheme counting
• Modern UI with TailwindCSS styling
• Responsive design that works on all devices

Graphemes are the smallest units of a writing system. They can be:

• Single characters (like "a", "b", "c")
• Emojis (like "🦕", "🌋")
• Combining characters (like "é" which can be "e" + "́")
• Complex sequences (like "👨‍👩‍👧‍👦" which is a family emoji)

For example, "dinosaurs 🦕 🌋🌴☄️" contains 14 graphemes: "d", "i", "n", "o", "s", "a", "u", "r", "s", " ", "🦕", "🌋", "🌴", "☄️".

• Frontend: React 18.2.0 with TypeScript
• Backend: Hono server for serving the app
• Styling: TailwindCSS
• Grapheme Counting: Uses Intl.Segmenter with granularity: 'grapheme'
• Platform: Built for Val Town

├── backend/
│   └── index.ts              # Hono server entry point
├── frontend/
│   ├── components/
│   │   └── App.tsx           # Main React component with all logic
│   ├── index.html            # HTML template
│   └── index.tsx             # React entry point
└── README.md

1. Enter text in the textarea
2. View real-time statistics:
   • Graphemes: The number of visual units
   • Characters: The total character count
   • Words: The number of words
3. Try the example texts to see complex grapheme counting in action

Text	Graphemes	Characters	Words
"dinosaurs 🦕 🌋🌴☄️"	14	20	2
"Hello World! 👋"	13	15	2
"café 🍵"	6	8	2
"👨‍👩‍👧‍👦"	1	7	1

The app uses Intl.Segmenter which is supported in:

• Chrome 87+
• Firefox 102+
• Safari 15+
• Edge 87+

For older browsers, it falls back to character counting.

This is a Val Town project. The main entry point is backend/index.ts which serves the React application.

To run locally with Deno:

deno run --allow-net --allow-read backend/index.ts