TextMorph ✨

Your text. Your style.
A fast, privacy-first web application for transforming plain text into stylish Unicode characters and crafting formatted content with an intuitive rich text editor. Everything runs 100% locally in your browser.

---

🚀 Features

1. 🔤 Fancy Text Generator

Transform plain text into stylish Unicode typography suitable for social media bios, posts, usernames, and messaging apps:

• 15+ Unicode Transformations: Bold, Italic, Sans Serif, Bold Script, Fraktur, Double-Struck, Monospace, Small Caps, Circled, Fullwidth, Underlined, Strikethrough, and more.
• Category Filtering: Quickly filter styles by All, Basic, Elegant, Technical, and Decorative.
• One-Click Copy: Copy any single style instantly or use Copy all to copy every generated variant at once.
• Character Counter & Paste: Paste from clipboard with a single click and track character count up to 5,000 characters.

2. 📝 Rich Text Workspace

A lightweight, distraction-free WYSIWYG rich text editor with full formatting controls:

• Typography: Change font family (Arial, Georgia, Times New Roman, Courier New, Trebuchet MS, Verdana, System Sans) and font sizes (12px to 48px).
• Text Styles: Bold, Italic, Underline, and Strikethrough with real-time active indicators.
• Colors & Highlighting: Custom color pickers for text color and background highlight color.
• Targeted Formatting Control:
  • Stop formatting at cursor: Click Remove highlight or Clear formatting with a blinking cursor to break out of active styles and type subsequent sentences normally.
  • Strip formatting from selections: Select any text and click Clear formatting or Remove highlight to cleanly strip styles.
• Lists & Alignment: Numbered lists, bullet lists (with automatic list exit on pressing Enter on an empty line), and left/center/right text alignment.
• Export & Clipboard:
  • Copy formatted text: Copies HTML + plain text using the Clipboard API so you can paste directly into Google Docs, Word, Notion, or email.
  • Copy plain text: Copies unformatted plain text.
  • Export HTML: Downloads a clean, self-contained .html file.
• Undo / Redo & Sample Data: Full undo/redo history, a quick Sample text loader, and an editor Reset button.

3. 🔒 100% Privacy-First

• Zero external server calls for text transformation or editing.
• All operations happen locally in your browser memory.

---

🛠️ Tech Stack

• Framework: React 19
• Language: TypeScript
• Bundler & Dev Server: Vite 8
• Testing: Vitest
• Linter: Oxlint
• Styling: Vanilla CSS with modern custom properties and fluid design tokens

---

📦 Getting Started Locally

Prerequisites

Ensure you have Node.js installed:

• Node.js: v18.0.0 or higher (v20+ recommended)
• npm: v9.0.0 or higher

Check your versions:

node -v
npm -v

Installation

1. Clone the repository (or download the source files):

   git clone https://github.com/your-username/TextMorph.git
   cd TextMorph

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open in your browser: Navigate to the local URL shown in your terminal (typically http://localhost:5173/).

---

📜 Available Scripts

In the project directory, you can run:

Command	Description
npm run dev	Starts the Vite development server with Hot Module Replacement (HMR).
npm test	Runs the test suite using Vitest.
npm run lint	Runs Oxlint to quickly check for TypeScript and React code issues.
npm run build	Compiles TypeScript and builds production-ready bundles in the dist/ directory.
npm run preview	Locally serves the production build from dist/ for verification.

---

📁 Project Structure

TextMorph/
├── public/                 # Static assets
├── src/
│   ├── assets/             # Images and media assets
│   ├── App.tsx             # Main application shell, Fancy Text & Rich Text components
│   ├── App.css             # Main styling, toolbar buttons, and responsive layout
│   ├── index.css           # Global reset, typography, and theme tokens
│   ├── main.tsx            # Application entry point
│   ├── unicodeTransform.ts # Core Unicode alphabet mappings and styling algorithms
│   └── unicodeTransform.test.ts # Vitest unit tests for text transformations
├── index.html              # HTML template
├── package.json            # Project metadata and dependencies
├── tsconfig.json           # TypeScript configuration
└── vite.config.ts          # Vite build and plugin configuration

---

💡 Usage Tips

• Fancy Text: Type or paste any text into the input box to instantly see all transformed styles rendered in real time. Click Copy on any card to copy just that style, or Copy all to copy everything.
• Exiting a List in Rich Text: When typing an ordered or bulleted list, press Enter twice on an empty list item or click the list button in the toolbar to exit back to standard paragraph text.
• Stopping a Style for New Sentences: When you finish typing a highlighted or custom-sized phrase, simply click Remove highlight or choose 16px / Clear formatting to continue typing subsequent sentences in clean, default body text.

---

📄 License

This project is licensed under the MIT License - feel free to use, modify, and distribute it for personal or commercial projects.