Velora is a modern, cross-platform PDF Reader and Document Viewer application built with Electron, React, and Vite. Designed for speed, responsiveness, and an exceptional user experience, Velora provides professional-grade tools for managing and reading PDFs directly on your desktop.
Dont forget to give a star ⭐, if found useful
Read it from 👉 here
demovid.mp4
- Built-in PDF Viewing: Fast and responsive PDF rendering utilizing
pdfjs-dist. - Cross-Platform: Available and compilable on Windows, macOS, and Linux.
- Draggable UI Elements: Highly interactive user interfaces using
@dnd-kit. - System-integrated Dark Mode: Fully customizable theming automatically syncing with your OS.
- Offline Storage: Document management and indexing using IndexedDB (
idb). - File Association: Registers as a native viewer for
.pdffiles upon install. - Modern User Interface: Built with Tailwind CSS and shadcn/ui for a premium, accessible experience.
- Framework: Electron + React 19
- Build Tool: electron-vite
- Language: TypeScript
- Styling: Tailwind CSS 4, shadcn/ui, Radix UI
- State Management: Zustand
- PDF Rendering: pdf.js
Dark mode in Velora is built gracefully using standard Web APIs, React Context, and Tailwind CSS configuration.
ThemeProviderContext: The app utilizes a customThemeProviderthat reads fromlocalStorageto remember user preferences (light,dark, orsystem).- DOM Manipulation: Depending on the set theme, it applies a
darkclass directly to the root HTMLwindow.document.documentElement. - System Preference Detection: If
systemis selected, the app utilizeswindow.matchMedia("(prefers-color-scheme: dark)")to detect and match the native OS theme. - Styling: The UI is crafted with Tailwind CSS variables and the
dark:variant, ensuring consistent styling changes seamlessly across all components without remounting.
- Node.js (v25.9.0 or higher recommended)
npmpackage manager
Clone the repository and install the dependencies:
git clone https://github.com/manideepanasuri/Velora.git
cd Velora
npm installTo start the application in development mode with Hot Module Replacement (HMR):
npm run devVelora uses electron-builder under the hood. You can compile the project for specific platforms natively:
# Build for Windows
npm run build:win
# Build for macOS
npm run build:mac
# Build for Linux
npm run build:linuxThe installers and executables will be generated in the automatically created dist/ or out/ directory.
velora/
├── src/
│ ├── main/ # Electron Main Process (System-level tasks)
│ ├── preload/ # Context Bridge between Main and Renderer
│ └── renderer/ # React Frontend (UI, Pages, PDF Canvas)
├── build/ # App icons and installer assets
├── electron-builder.yml # Release packaging configuration
└── electron.vite.config.ts # Vite configuration for all layers
Developed by Manideep Anasuri. Feel free to reach out, check out my other projects, or read my latest articles!