Typeleaf

https://typeleaffall.netlify.app/ https://typeleaffall.netlify.app/ Read with your fingertips.

Typeleaf is a modern, privacy-first typing practice application that turns your own PDF and EPUB books into interactive typing sessions. Instead of practicing with random sentences, you can build speed and accuracy using books you actually want to read.

Features

Personal book library

• Upload PDF and EPUB files
• Drag-and-drop file import
• Local book storage
• Search your library
• Favorite and delete books
• Continue from your saved position
• Track completion progress

Flexible typing reader

• Scroll through the complete book
• Click anywhere in the text to start typing from that position
• Correct characters are visually confirmed
• Mistakes are highlighted without interrupting your flow
• Use Backspace to return and correct previous characters
• Return instantly to your current typing position
• Jump back to the top of the book
• Automatic progress saving

Live statistics

• Words per minute
• Accuracy
• Error count
• Completion percentage
• Remaining characters

Personalization

• Light, dark, and system themes
• Adjustable font size
• Serif, sans-serif, and monospace fonts
• Adjustable line spacing
• Custom typing cursor color
• Responsive desktop, tablet, and mobile layouts

Privacy

Typeleaf is local-first. Uploaded books, preferences, and reading progress remain in your browser and are not sent to an application server.

Because the current version uses browser storage:

• Your library does not automatically synchronize between devices.
• Clearing browser data may remove your saved books and progress.
• Each browser and device has its own independent library.

Technology stack

• Next.js 15
• React 19
• TypeScript
• PDF.js
• EPUB.js
• Lucide React
• Browser LocalStorage
• Custom responsive CSS design system

Getting started

Requirements

• Node.js 20 or newer
• npm

Installation

Clone the repository:

git clone https://github.com/soufianfallah/typeleaf.git
cd typeleaf

Install the dependencies:

npm install

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

Production build

Create an optimized production build:

npm run build

Run the production server:

npm start

Project structure

typeleaf/
├── app/
│   ├── library/        # Book upload and personal library
│   ├── reader/[id]/    # Interactive typing reader
│   ├── settings/       # Reader and theme preferences
│   ├── globals.css     # Responsive design system
│   ├── layout.tsx      # Application layout and metadata
│   └── page.tsx        # Landing page
├── components/         # Shared interface components
├── lib/                # Browser storage utilities
├── types/              # Shared TypeScript definitions
├── netlify.toml        # Netlify deployment configuration
└── package.json

Available commands

Command	Description
npm run dev	Start the development server
npm run build	Create an optimized production build
npm start	Run the production build

Current limitations

• Image-only or protected PDF files may not contain extractable text.
• Browser storage limits the practical size of a personal library.
• Progress does not currently synchronize between devices.
• User accounts and cloud backups are not included yet.

Roadmap

• IndexedDB storage for larger libraries
• User accounts and cross-device synchronization
• Chapter navigation
• Bookmarks and highlights
• Reading streaks and daily goals
• Import and export of progress
• Offline and PWA support
• Expanded session history and statistics

Contributing

Contributions and suggestions are welcome. Open an issue before making a major change so the proposed approach can be discussed.

License

No open-source license has been selected yet. Until a license is added, the source code remains protected by default copyright rules.