Printable Banners

A web application for creating and customizing printable banners, built with React, TypeScript, and Tailwind CSS.

Features

• 🎨 Template System: Choose from pre-built templates like "Welcome Home", "Congratulations", and "Happy Birthday"
• ✏️ Text Customization: Edit text, change fonts, colors, sizes, and positioning
• 🖨️ Ink Saver Mode: Optional outline-only rendering to save printer ink
• 📄 Multi-page Support: Create banners that span multiple landscape pages
• 📝 PDF Generation: Download high-quality PDFs ready for printing with precise cross-page positioning (powered by jsPDF v3)
• 👁️ PDF Preview: Preview your banner PDF before downloading
• 📱🔧 Responsive Design: Works on desktop and tablet devices (mobile phones are not targeted)

Getting Started

Prerequisites

• Bun (>=1.0.0, required)
• A modern web browser (Chrome, Safari, Firefox)

Note: Node.js compatibility is best-effort, but Bun is required for full support and all scripts.

Installation

1. Clone the repository:

   git clone <repository-url>
   cd printable-banners

2. Install dependencies:

   bun install

3. Start the development server:

   bun run dev

4. Open your browser and navigate to http://localhost:3000

Project Structure

src/
├── core/                 # Core business logic
│   ├── banner/          # Banner model and utilities
│   └── template/        # Template system
├── components/          # React UI components
│   ├── editor/          # Banner editing interface
│   ├── templates/       # Template selection
│   └── ui/              # Reusable UI components
├── hooks/               # Custom React hooks
└── utils/               # Utility functions

tests/
├── unit/                # Unit tests for core logic
├── integration/         # Component integration tests
└── e2e/                 # End-to-end tests (Playwright)

Usage

Creating a Banner

1. Choose a Template: Select from available templates or start with a blank banner
2. Add Text: Use the text input to add new text elements
3. Customize: Select text elements to edit their properties:
   • Text content
   • Font size and family
   • Color
   • Position and rotation
4. Preview: See real-time preview of your banner
5. Print: Use the print function to output your banner across multiple pages

Ink Saver Mode

Toggle "Ink Saver Mode" to render text as outlines instead of filled text. This:

• Reduces ink consumption
• Speeds up printing
• Can create an appealing aesthetic effect

Page Assembly

Banners are designed to be printed in landscape orientation on standard paper sizes (8.5"×11" by default). For larger banners:

1. Print all pages
2. Arrange pages in order
3. Tape or glue pages together to form the complete banner

Development

Running Tests

# Run all unit tests
bun test

# Run tests in watch mode
bun test --watch

# Run E2E tests (Playwright v1.54)
bun run test:e2e

Building for Production

bun run build

Code Quality

# Lint code
bun run lint

# Format code
bun run format

Technology Stack

• Frontend: React 19.1 with TypeScript 5
• Styling: Tailwind CSS 4.1
• Build Tool: Vite 7
• Runtime: Bun (>=1.0.0, Node.js compatibility best-effort)
• PDF Generation: jsPDF 3
• Testing: Bun test (unit), Playwright 1.54 (E2E)

Browser Support

• Primary: Chrome (full support, desktop and tablet)
• Secondary: Safari (best-effort compatibility, desktop and tablet)
• Note: Mobile phone browsers are not targeted or officially supported
• Modern browser features are used with progressive enhancement

Contributing

We welcome contributions! Please see our Contributing Guidelines for details on:

• Development workflow
• Code standards
• Pull request process
• Project philosophy

Quick start for contributors:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Make your changes and add tests
4. Run tests: bun test && bun run test:e2e
5. Submit a pull request

For bug reports and feature requests, please use our GitHub Issues.

Roadmap

Phase 1 ✅

• Basic banner model and text rendering
• Core template system
• Simple UI with text editing
• Cross-page text positioning
• Print preview functionality
• Font scaling and page calculation

Phase 2 ✅

• Smart text sizing and positioning
• Print positioning optimization
• PDF export functionality with precise cross-page positioning
• PDF preview functionality
• PDF buffer generation for advanced use cases

Phase 3 ✅

• Enhanced font selection system with 17+ system fonts
• Font categorization (Serif, Sans Serif, Display, Handwriting, Monospace)
• Font detection and fallback system
• Improved font preview in editor
• Basic decorative elements (borders and emojis)
• Enhanced templates with decorative elements

Phase 4 (Planned)

• Advanced decorative elements (flowers, borders)
• Custom page size configuration
• Print optimization enhancements

License

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

Star History

Acknowledgments

• Built following minimal core architecture principles
• Designed for extensibility and maintainability
• Focused on user experience and accessibility