\n {/* Header */}\n

\n Grapheme Counter\n

\n Count graphemes in text including emojis and complex characters\n

\n\n {/* Main Content - Two column layout on larger screens */}\n

\n {/* Left Column - Main Content */}\n

\n {/* Text Input */}\n

\n \n Enter your text:\n \n \n

\n \n Clear text\n \n

\n\n {/* Statistics */}\n

\n {stats.graphemeCount}\n

Graphemes

\n {stats.characterCount}\n

Characters

\n {stats.wordCount}\n

Words

\n\n {/* Explanation */}\n

\n What are graphemes?\n

\n Graphemes are the smallest units of a writing system. They can be single characters, emojis, or\n combinations of characters that form a single visual unit. For example, \"dinosaurs 🦕 🌋🌴☄️\" contains\n 14 graphemes: \"d\", \"i\", \"n\", \"o\", \"s\", \"a\", \"u\", \"r\", \"s\", \" \", \"🦕\", \"🌋\", \"🌴\", \"☄️\".\n

\n\n {/* Right Column - Examples (hidden on mobile, shown on lg+) */}\n

\n Try these examples:\n

\n {exampleTexts.map((exampleText, index) => (\n handleExampleClick(exampleText)}\n className=\"w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-colors\"\n >\n

\n {exampleText}\n

\n {countGraphemes(exampleText)} graphemes\n

\n \n ))}\n

\n\n {/* Mobile Examples - Shown below on smaller screens */}\n

\n Try these examples:\n

\n {exampleTexts.map((exampleText, index) => (\n handleExampleClick(exampleText)}\n className=\"text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-colors\"\n >\n

{exampleText}

\n {countGraphemes(exampleText)} graphemes\n

\n \n ))}\n

\n\n {/* Footer */}\n

\n Built with React and Intl.Segmenter for accurate grapheme counting\n

\n );\n}",[188,106,68],"pulls","branches",1,"forks","envVars",{"_202":26,"_204":26},"connections",{"_202":26,"_203":26},"count","unfilledCount","emptyCount",{"_37":284,"_13":283,"_66":275,"_47":-5,"_39":40,"_181":285,"_183":24,"_41":286,"_43":26,"_69":107,"_185":-5,"_71":30,"_186":-5,"_222":287,"_17":288},{"_37":273,"_13":274,"_66":120,"_47":275,"_39":40,"_181":276,"_183":24,"_41":277,"_43":196,"_69":278,"_185":279,"_71":30,"_186":280,"_222":281,"_17":282},{"_37":269,"_13":188,"_66":180,"_47":-5,"_39":40,"_181":196,"_183":24,"_41":270,"_43":26,"_69":107,"_185":-5,"_71":30,"_186":-5,"_222":271,"_17":272},{"_37":179,"_13":106,"_66":105,"_47":180,"_39":40,"_181":182,"_183":24,"_41":266,"_43":26,"_69":107,"_185":-5,"_71":30,"_186":-5,"_222":267,"_17":268},{"_37":190,"_13":68,"_66":67,"_47":105,"_39":40,"_181":100,"_183":24,"_41":263,"_43":182,"_69":70,"_185":192,"_71":30,"_186":-5,"_222":264,"_17":265},{"_37":255,"_13":256,"_66":257,"_47":180,"_39":40,"_181":258,"_183":24,"_41":259,"_43":26,"_69":21,"_185":260,"_71":30,"_186":-5,"_222":261,"_17":262},{"_37":247,"_13":248,"_66":249,"_47":180,"_39":40,"_181":250,"_183":24,"_41":251,"_43":26,"_69":70,"_185":252,"_71":30,"_186":-5,"_222":253,"_17":254},{"_37":241,"_13":242,"_66":243,"_47":-5,"_39":40,"_181":125,"_183":24,"_41":244,"_43":26,"_69":107,"_185":-5,"_71":30,"_186":-5,"_222":245,"_17":246},{"_37":233,"_13":234,"_66":235,"_47":-5,"_39":40,"_181":236,"_183":24,"_41":237,"_43":26,"_69":21,"_185":238,"_71":30,"_186":-5,"_222":239,"_17":240},{"_37":225,"_13":226,"_66":227,"_47":-5,"_39":40,"_181":228,"_183":24,"_41":229,"_43":196,"_69":21,"_185":230,"_71":30,"_186":-5,"_222":231,"_17":232},{"_37":216,"_13":217,"_66":218,"_47":-5,"_39":40,"_181":219,"_183":24,"_41":220,"_43":26,"_69":21,"_185":221,"_71":30,"_186":-5,"_222":223,"_17":224},"a0c66220-5551-11f0-acad-f69ea79377d9","deno.json","a0c6641e-5551-11f0-acad-f69ea79377d9",11,["D",1751246952332],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","children",[],[217],"458652c0-5552-11f0-867d-f69ea79377d9","README.md","a0a57a4c-5551-11f0-a0e9-f69ea79377d9",14,["D",1751247229004],"# Grapheme Counter\n\nA simple React web application that accurately counts graphemes in text, including emojis and complex characters.\n\n## Features\n\n- **Real-time grapheme counting** using `Intl.Segmenter` for accurate results\n- **Multiple text statistics**: graphemes, characters, and words\n- **Example texts** to demonstrate complex grapheme counting\n- **Modern UI** with TailwindCSS styling\n- **Responsive design** that works on all devices\n\n## What are Graphemes?\n\nGraphemes are the smallest units of a writing system. They can be:\n- Single characters (like \"a\", \"b\", \"c\")\n- Emojis (like \"🦕\", \"🌋\")\n- Combining characters (like \"é\" which can be \"e\" + \"́\")\n- Complex sequences (like \"👨‍👩‍👧‍👦\" which is a family emoji)\n\nFor example, \"dinosaurs 🦕 🌋🌴☄️\" contains 14 graphemes: \"d\", \"i\", \"n\", \"o\", \"s\", \"a\", \"u\", \"r\", \"s\", \" \", \"🦕\", \"🌋\", \"🌴\", \"☄️\".\n\n## Technical Details\n\n- **Frontend**: React 18.2.0 with TypeScript\n- **Backend**: Hono server for serving the app\n- **Styling**: TailwindCSS\n- **Grapheme Counting**: Uses `Intl.Segmenter` with `granularity: 'grapheme'`\n- **Platform**: Built for Val Town\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server entry point\n├── frontend/\n│ ├── components/\n│ │ └── App.tsx # Main React component with all logic\n│ ├── index.html # HTML template\n│ └── index.tsx # React entry point\n└── README.md\n```\n\n## Usage\n\n1. Enter text in the textarea\n2. View real-time statistics:\n - **Graphemes**: The number of visual units\n - **Characters**: The total character count\n - **Words**: The number of words\n3. Try the example texts to see complex grapheme counting in action\n\n## Example Results\n\n| Text | Graphemes | Characters | Words |\n|------|-----------|------------|-------|\n| \"dinosaurs 🦕 🌋🌴☄️\" | 14 | 20 | 2 |\n| \"Hello World! 👋\" | 13 | 15 | 2 |\n| \"café 🍵\" | 6 | 8 | 2 |\n| \"👨‍👩‍👧‍👦\" | 1 | 7 | 1 |\n\n## Browser Compatibility\n\nThe app uses `Intl.Segmenter` which is supported in:\n- Chrome 87+\n- Firefox 102+\n- Safari 15+\n- Edge 87+\n\nFor older browsers, it falls back to character counting.\n\n## Development\n\nThis is a Val Town project. The main entry point is `backend/index.ts` which serves the React application.\n\nTo run locally with Deno:\n```bash\ndeno run --allow-net --allow-read backend/index.ts\n``` ",[],[226],"a0b011fa-5551-11f0-baea-f69ea79377d9",".vtignore","a0b012ae-5551-11f0-baea-f69ea79377d9",10,["D",1751246952489],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[234],"a077c76e-5551-11f0-b44b-f69ea79377d9","shared","a077c8cc-5551-11f0-b44b-f69ea79377d9",["D",1751246952134],[],[242],"a0adb108-5551-11f0-aef4-f69ea79377d9","index.tsx","a0adb19e-5551-11f0-aef4-f69ea79377d9",9,["D",1751246952332],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[188,248],"a0960daa-5551-11f0-8cb4-f69ea79377d9","index.html","a0960e68-5551-11f0-8cb4-f69ea79377d9",5,["D",1751246952331],"\n\n \n \n \n Grapheme Counter\n \n\n \n \n\n \n \n\n \n \n \n

\n \n \n\n",[],[188,256],["D",1751336512039],[],[188,106,68],["D",1751246952225],[209],[188,106],"a057a09c-5551-11f0-bda1-f69ea79377d9",["D",1751246951920],[208,210,211],[188],"b991592c-5551-11f0-8f38-f69ea79377d9","index.ts","a0684f96-5551-11f0-a3c1-f69ea79377d9",12,["D",1751246994236],"http","import { Hono } from \"https://esm.sh/hono@4.0.5\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files from frontend directory\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Main route - serve the React app\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals\n","grapheme",[],[283,274],"backend","a0684ee2-5551-11f0-a3c1-f69ea79377d9",2,["D",1751246952032],[206],[283],["D",1751246125761],{"_11":12,"_157":74},{"_11":12,"_153":-5,"_73":74,"_31":72,"_154":155,"_156":30},{"_43":100,"_13":16,"_37":40,"_145":109,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":14,"_152":12},"ctx",{"_56":-5,"_176":326,"_327":328,"_329":330,"_331":30,"_332":30,"_333":30,"_334":24,"_335":-5,"_336":-7,"_337":-7,"_338":26,"_339":30,"_340":30,"_341":-5,"_342":30,"_343":30,"_344":30,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":16,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · components