Grid Paper Generator / Gerador de Folhas

English | Português

---

English

🌐 Live Demo: gridpaper.dicastro.io

📝 Description

Grid Paper Generator is a high-precision web tool designed to create and print custom paper patterns. Whether you need standard ruled paper for writing, grids for technical drawing, or specialized sheets for calligraphy and music, this tool provides a seamless experience with pixel-perfect (or rather, millimeter-perfect) accuracy.

Built with React 19 and Vite 8, the application leverages native SVG rendering in millimeters (mm) to ensure that what you see on the screen matches exactly what comes out of the printer.

✨ Features

• Diverse Patterns: Support for Ruled (lined), Grid, Dots, Staff (music), Calligraphy, and Triangular (isometric) patterns.
• Line Numbering: Includes a "Competition Style" numbering system for ruled paper, perfect for exams and legal drafts.
• Full Customization: Adjust spacing, line weight, colors, margins, and page orientation (Portrait or Landscape) in real-time. Add your own headers, secondary headers, footers and watermarks.

🛠️ Technologies

• Framework: React 19 (TypeScript)
• Build Tool: Vite 8.0
• Styling: Tailwind CSS v4 + PostCSS
• Icons: Lucide React
• Graphics: Native SVG (mm-based units)
• Utilities: clsx, tailwind-merge, jspdf, html2canvas

🚀 Getting Started

1. Clone the repository
2. Install dependencies: npm install
3. Run the development server: npm run dev
4. Open your browser and start designing your paper.

---

Português

🌐 Acesse o site: gridpaper.dicastro.io

📝 Descrição

O Gerador de Folhas (Grid Paper Generator) é uma ferramenta web de alta precisão projetada para criar e imprimir papel com padronagem personalizada. Seja para folhas pautadas simples, grades para desenho técnico ou folhas especializadas para caligrafia e música, esta ferramenta oferece uma experiência fluida com precisão milimétrica.

Desenvolvido com React 19 e Vite 8, o aplicativo utiliza renderização SVG nativa em milímetros (mm) para garantir que o que você vê na tela seja exatamente o que sairá na impressora.

✨ Recursos

• Diversos Padrões: Suporte para folha pautado, quadriculada, pontilhada, partitura musical, caligrafia e triangular (isométrico).
• Numeração de Linhas: Inclui numeração estilo "concurso" para folhas pautadas, ideal para redações e rascunhos oficiais.
• Customização Total: Ajuste espaçamento, espessura da linha, cores, margens e orientação da página (Retrato ou Paisagem) em tempo real. Adicione cabeçalhos, rodapés e marcas d'água.

🛠️ Tecnologias

• Framework: React 19 (TypeScript)
• Build Tool: Vite 8.0
• Estilização: Tailwind CSS v4 + PostCSS
• Ícones: Lucide React
• Gráficos: SVG Nativo (unidades baseadas em mm)
• Utilitários: clsx, tailwind-merge, jspdf, html2canvas

🚀 Como Começar

1. Clone o repositório
2. Instale as dependências: npm install
3. Inicie o servidor de desenvolvimento: npm run dev
4. Abra seu navegador e comece a criar seu papel personalizado.

📂 Adicionando Novos Modelos (Templates)

Para adicionar um novo modelo pronto, siga estes passos:

1. Miniatura: Coloque um arquivo de imagem (ex: .jpg ou .png) no diretório public/templates/.
2. Configuração: Crie um novo arquivo .json em src/data/templates/.
3. Estrutura: Utilize o seguinte formato JSON:

   {
     "id": "id-do-modelo",
     "name": "Nome do Modelo",
     "description": "Descrição curta",
     "translations": {
       "en": { "name": "Name", "description": "Description" },
       "fr": { "name": "Nom", "description": "Description" }
     },
     "thumbnail": "/templates/nome-da-imagem.jpg",
     "settings": {
       "pattern": "grid",
       "spacing": 5,
       "lineColor": "#8b5e3c"
     }
   }

   As chaves em settings correspondem à interface PaperSettings em src/types/paper.ts.