Elathi Paper Studio

Elathi Paper Studio is a flexible, React-based web application that allows you to design, customize, and generate various types of printable paper. Whether you need graph paper, dot grid paper, or specialized handwriting guidelines, this tool provides a highly customizable interface to meet your exact needs.

Features Highlight

• Multiple Paper Layouts:

  • Graph Paper: Customizable subdivisions, major/minor line thickness and colors, and optional axis numbers.
  • Dot Grid Paper: Adjustable symbol type (dots, pluses, etc.), size, spacing, and optional connecting lines.
  • Handwriting Paper: Supports single, two, three, four, or five-line systems with customizable dashed lines, inner gaps, and individual line colors.

• Extensive Customization:

  • Choose from standard paper sizes (A4, Letter, Legal, A3) or define custom dimensions.
  • Switch between Portrait and Landscape orientations.
  • Change the paper background color.
  • Fine-tune all margins (content and guide margins), spacing, and line gaps.
  • Add vertical margins (single or double style) and optional header/footer lines.

• Custom Elements:

  • Add arbitrary text, rectangles, circles, and images to your paper layout.
  • Adjust properties like positions, sizes, fill/stroke colors, fonts, and rotation to create highly personalized templates.

• Advanced Tools:

  • History Management: Robust Undo and Redo functionality (up to 50 steps) with keyboard shortcuts (Ctrl+Z / Ctrl+Y).
  • Shareable Links: Share your custom paper templates easily via URL.
  • PDF Export: Export your custom designs directly to PDF format for printing.

Installation

Prerequisites

• Node.js (Version 18+ recommended)

Setup Steps

1. Clone the repository:

   git clone <repository-url>
   cd elathi-paper-studio

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open your browser and navigate to the local server URL provided in the terminal (usually http://localhost:5173).

Usage

• Sidebar Controls: Use the left sidebar to change the paper type, customize layouts, adjust margins, and manage custom drawn elements. On mobile devices, this menu can be toggled using the top-left menu button.
• Canvas Preview: The main area displays a real-time, interactive preview of your paper configuration.
• Shortcuts:
  • Ctrl + Z (or Cmd + Z on Mac): Undo
  • Ctrl + Y or Ctrl + Shift + Z (or Cmd + Shift + Z on Mac): Redo
• Sharing: Changes are reflected in the URL using base64 encoded parameters, allowing you to bookmark or share your specific paper design.

Building for Production

To create a production-ready build, run:

npm run build

This will compile the TypeScript code and bundle the optimized application into the dist folder. You can test the production build locally using npm run preview.

Technologies Used

• React
• TypeScript
• Vite
• Tailwind CSS
• jsPDF (for PDF generation)
• Lucide React (for UI icons)