Running Bolt.diy with OpenRouter

TextForge: The Ultimate Text & Data Manipulation Toolkit
A responsive, multi-tool web application designed for developers and writers to clean, format, convert, and generate text and data snippets efficiently.
1. Text Cleanup & Analysis
Features:
Whitespace & Lines: Remove extra spaces, remove all line breaks, convert to a single line.
Text Analysis: Live word count, character count, and line count.
Clear Input: A quick button to clear the text area.
Implementation:
Generated javascript
// Example React state and handler
const [input, setInput] = useState("");
const [output, setOutput] = useState("");

// Analysis is derived from input state
const wordCount = input.trim().split(/\s+/).filter(Boolean).length;
const charCount = input.length;

const handleCleanup = (action) => {
  let result = "";
  switch (action) {
    case "removeExtraSpaces":
      result = input.replace(/\s+/g, ' ').trim();
      break;
    case "removeLineBreaks":
      result = input.replace(/(\r\n|\n|\r)/gm, ' ');
      break;
    case "clear":
      setInput("");
      result = "";
      break;
    default:
      result = input;
  }
  setOutput(result);
};
Use code with caution.
JavaScript
2. Case Converter
Features:
Standard Cases: UPPERCASE, lowercase, Sentence case.
Programming Cases: camelCase, PascalCase, snake_case, kebab-case.
Instant conversion on button click.
Implementation:
Use a combination of native string methods and regular expressions for complex cases.
Generated javascript
// Example conversion logic
const toCamelCase = (str) => {
  return str.toLowerCase().replace(/([-_ ][a-z])/g, g => g.toUpperCase().replace(/[-_ ]/g, ''));
};

const toPascalCase = (str) => {
  const camel = toCamelCase(str);
  return camel.charAt(0).toUpperCase() + camel.slice(1);
};

const handleCaseChange = (caseType) => {
  let result = "";
  switch (caseType) {
    case "uppercase": result = input.toUpperCase(); break;
    case "camelCase": result = toCamelCase(input); break;
    // ... other cases
  }
  setOutput(result);
};
Use code with caution.
JavaScript
3. Code & Data Formatter
Features:
JSON Tools: Beautify (pretty-print) and Minify JSON.
Data Conversion: Convert delimited Key-Value pairs (e.g., name=John\nage=30) into a JSON object.
CSS Minifier: Strip comments and whitespace from CSS code.
Implementation:
Use native browser APIs and a lightweight library for CSS.
Generated javascript
// JSON Formatting
const formatJSON = (beautify = true) => {
  try {
    const jsonObj = JSON.parse(input);
    const space = beautify ? 2 : 0;
    setOutput(JSON.stringify(jsonObj, null, space));
  } catch (error) {
    setOutput("Error: Invalid JSON");
  }
};

// Key-Value to JSON
const convertKvToJson = () => {
  const lines = input.split('\n').filter(line => line.includes('='));
  const obj = lines.reduce((acc, line) => {
    const [key, ...valueParts] = line.split('=');
    acc[key.trim()] = valueParts.join('=').trim();
    return acc;
  }, {});
  setOutput(JSON.stringify(obj, null, 2));
};

// For CSS Minification, suggest a library like 'clean-css' if building with Node/bundler
// In a simple client-side app, a regex approach can be a starting point:
const minifyCSS = (css) => {
  return css.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, '') // remove comments
            .replace(/\s+/g, ' ') // collapse whitespace
            .replace(/ ?([{:};,]) ?/g, '$1'); // remove space around operators
}
Use code with caution.
JavaScript
4. Encoding & Hashing
Features:
Base64: Encode text to Base64 and decode from Base64.
URL: Encode and Decode URI components.
Hashing: Generate a SHA-256 hash from text input (useful for integrity checks).
Implementation:
Use the built-in Web APIs for robust and secure operations.
Generated javascript
// Base64 Encoding/Decoding
const handleBase64 = (action) => {
  try {
    setOutput(action === 'encode' ? btoa(input) : atob(input));
  } catch (error) {
    setOutput("Error: Invalid input for this operation.");
  }
};

// SHA-256 Hashing (async operation)
async function generateSha256(text) {
  const encoder = new TextEncoder();
  const data = encoder.encode(text);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}
Use code with caution.
JavaScript
5. Utility Generators
Features:
UUID Generator: Generate version 4 (random) and version 1 (timestamp-based) UUIDs.
Password Generator: Create strong, randomized passwords with configurable length and character types (lowercase, uppercase, numbers, symbols).
Implementation:
Use the Web Crypto API and the popular uuid library.
Generated javascript
// UUID Generation
import { v1 as uuidv1, v4 as uuidv4 } from 'uuid';

const generateUUID = (version) => {
  const newId = (version === 1) ? uuidv1() : uuidv4();
  setOutput(prev => prev + (prev ? '\n' : '') + newId); // Append new UUIDs
};

// Or for a simple v4 without a library:
const generateCryptoUUID = () => {
    setOutput(crypto.randomUUID());
}
Use code with caution.
JavaScript
UI/UX Considerations
Tool Switcher: A vertical sidebar with icons and labels for each tool category (Cleanup, Case, Format, etc.).
Layout: A responsive dual-pane layout. Input on the left, output on the right. On mobile, they stack vertically.
Real-time Updates: Output should update instantly as the user types or applies a transformation.
Copy & Clear: Prominent "Copy to Clipboard" buttons for the output and "Clear" buttons for both panes.
Theme & Styling:
Dark/Light Mode: A toggle switch in the header. Use CSS variables for easy theme switching.
Color Palette: A modern, purple-centric theme. (e.g., primary: #6D28D9, background-dark: #1F2937, text-dark: #E5E7EB).
Info Bar: A persistent footer bar displaying live Word Count, Character Count, and Line Count for the input text.
Deployment
Build: Create a production-ready build using a bundler like Vite or Create React App: npm run build.