Handwriter

🚀 Live Demo - txt.prasidhshetty.in

Transform your typed text into realistic handwriting images. Customize fonts, paper sizes, spacing, colors, and add drawings. Perfect for assignments, notes, and documents.

✨ Features

• Custom Handwriting Fonts - Upload your own handwriting font or choose from built-in options
• Multiple Fonts & Colors in Same Page - Mix different fonts, colors, and styles (bold, italic, underline) in a single document
• Multiple Paper Sizes - A4, Fiction Novel, Digest, Trade Paperback, US Letter
• Advanced Drawing Tool - Draw diagrams with pen, eraser, shapes, spray, and more with full touch support
• Full Customization - Adjust font size, ink color, spacing, margins, and line styles
• Text Style Options - Apply bold, italic, and underline formatting to specific text segments
• Multiple Export Options - Download as individual images or combined PDF
• Dark Mode - Beautiful dark interface for comfortable use (default theme)
• Fully Responsive - Works perfectly on desktop, tablets, and mobile devices
• Real-time Preview - See changes instantly before generating

🌠 Preview

🚀 Quick Start

Online Use

Visit txt.prasidhshetty.in and start converting text immediately.

Deploy Your Own

Deploy to Vercel

Deploy to GitHub Pages

1. Fork this repository
2. Go to Settings → Pages
3. Select branch (main) and deploy
4. Your site will be live at https://yourusername.github.io/handwriter/

Local Development

# Clone the repository
git clone https://github.com/Prasidhpshetty7/handwriter.git
cd handwriter

# Install dependencies
npm install

# Start local server
npm run dev

# Open http://localhost:5000

📖 How to Use

1. Enter Text - Type or paste your text in the input area
2. Customize - Adjust font, size, spacing, paper size, and colors
3. Mix Styles - Change fonts, colors, or apply bold/italic/underline at any point while typing
   • Each text segment keeps its own formatting
   • Old text remains unchanged when you modify settings
   • Create documents with multiple fonts and colors on the same page
4. Add Drawings (Optional) - Click "Draw" to add diagrams or illustrations
5. Generate - Click "Generate Image" to create handwriting pages
6. Download - Save individual images or download all as PDF

Upload Your Own Handwriting

1. Create a font from your handwriting using Calligraphr
2. Upload the .ttf or .otf file using "Upload your handwriting font" button
3. Your text will now appear in your personal handwriting style

Using Multiple Fonts and Styles

1. Type some text with the current font and color
2. Change the font, color, or toggle bold/italic/underline
3. Continue typing - new text uses the new settings
4. Previously typed text keeps its original formatting
5. Mix as many different styles as you want on the same page

🛠️ Built With

• HTML5 Canvas - For rendering and drawing
• html2canvas - Convert DOM to canvas images
• jsPDF - Generate PDF documents
• Vanilla JavaScript - No framework dependencies
• CSS3 - Modern styling with dark mode support

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Report bugs or suggest features in the Issues section.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

💡 Inspiration

This project was inspired by Saurabh Daware's text-to-handwriting. The concept has been enhanced with additional features including an advanced drawing tool, multiple paper sizes, dark mode, and improved customization options.

👨‍💻 Author

Prasidh P Shetty

• Website: prasidhshetty.in
• Twitter: @shettyprasidh7
• GitHub: @Prasidhpshetty7

---

Made with ❤️ by Prasidh P Shetty

⭐ Star this repo if you find it useful!