Discord Colored Text Generator (Mantine UI)

This project is a Next.js application that generates colored text for Discord using ANSI color codes. All UI elements—including color selection, headings, text inputs, and buttons—are built with Mantine UI to ensure a consistent and minimal aesthetic without relying on basic HTML or Tailwind CSS.

Features

• Live Preview: Edit text and see your color and style changes in real time.
• ANSI Color Codes: Generates text formatted with ANSI escape codes for Discord.
• Mantine UI Components: All core UI elements use Mantine, ensuring consistent styling.
• Copy to Clipboard: Easily copy the formatted text (with ANSI codes) for use in Discord.

Installation

1. Clone the Repository:

   git clone https://github.com/<your-username>/discord-colored-text-generator.git
   cd discord-colored-text-generator
   

2. Install Dependencies:

   npm install
   

3. Run the Development Server:

   npm run dev
   

4. Open http://localhost:3000 in your browser to view the app.

Usage

Edit the Text:

• Use the editable area to type or modify your text.

Apply Styles:

1. Select a portion of the text.
2. Click one of the Mantine-styled buttons (Bold, Underline, or choose a Foreground/Background color).
3. The selected text will be wrapped with the corresponding ANSI .

Copy Formatted Text:

• Click the "Copy text as Discord formatted" button. The text, along with ANSI escape codes wrapped in triple backticks, will be copied to your clipboard.

Send in Discord:

• Paste the copied text into Discord's to see the formatted text with colors and styles.

Important Notes

Mantine UI Styling:

• All styling is done using Mantine UI components and its styling system (e.g., the sx prop). No raw HTML or Tailwind CSS is used for core UI elements.

ANSI Codes:

• The generated ANSI escape codes are designed for Discord.

File Structure:

• The project is structured for a Next.js app, with main code in the app/ directory.

License

Created with Mantine UI & Next.js by Vikas Singh Link-https://discord-colored-text-generator-phi.vercel.app