Dyslexia-Friendly Daily Worksheet Generator

A beautiful, accessible PWA that generates customizable daily worksheets—including lined paper, mazes, and letter tracing—designed specifically to support early learners and individuals with dyslexia.

Comment

Inspiration

I was inspired by the need for inclusive and accessible educational tools for early learners, especially those with learning differences such as dyslexia. Traditional worksheets often lack proper design considerations for accessibility, leaving many children struggling unnecessarily. My goal was to create a delightful, empowering digital experience for parents, teachers, and kids to generate printable learning aids that actually help.

What it does

The Dyslexia-Friendly Daily Worksheet Generator is a Progressive Web App (PWA) that allows users to generate:

  • Lined Paper with 3-line and dotted tracing options
  • Mazes with random generation and adjustable difficulty
  • Letter Tracing worksheets with dyslexia-friendly dashed overlays

Key features include:

  • Real PDF generation and download
  • Offline support (PWA)
  • Touch-friendly UI with pastel themes
  • Accessibility features like ARIA roles and high-contrast mode
  • OpenDyslexic and Lexend font integration

How we built it

We built the app using:

  • Vite + React + TypeScript for fast development
  • TailwindCSS for responsive, mobile-first UI
  • PWA support via manifest.json and service workers
  • Custom React components for each worksheet type
  • HTML2Canvas and jsPDF for real PDF generation
  • ARIA roles and WCAG-compliant color schemes for accessibility

The folder structure includes:

  • src/components/generators/ for worksheet logic
  • src/utils/pdfGenerator.ts for export functionality
  • src/App.tsx and a LandingPage.tsx for clean routing and UX

Challenges we ran into

  • PDF rendering: Maintaining accuracy in layout and text alignment while generating real-time downloadable PDFs was technically tricky.
  • Font rendering: Ensuring OpenDyslexic and Lexend fonts loaded consistently across browsers.
  • Accessibility: Designing UI that’s beautiful yet fully compliant with dyslexia-friendly and WCAG 2.1 guidelines.
  • Maze logic: Writing a performant maze generator with adjustable complexity that works across devices.

Accomplishments that we're proud of

  • A full-featured offline-capable PWA built from scratch
  • Seamless PDF generation with high-quality print-ready output
  • A mobile-first, clean, responsive UI with accessible typography
  • Empowering neurodiverse learners with inclusive design

What we learned

  • How to implement and test real-world accessibility in a React PWA
  • Generating high-resolution PDFs from React components
  • Font loading and fallback techniques for accessibility
  • Structuring a modern TypeScript-based codebase for educational apps

What's next for Dyslexia-Friendly Daily Worksheet Generator

  • Audio instruction overlays for each worksheet
  • Worksheet scheduling and reminders
  • User customization profiles to save preferences
  • Gamification elements to make learning more fun
  • Translation/localization to reach more learners globally

Built With

Share this project:

Updates