Ruby Passport is a modern, privacy-focused web app for capturing and generating compliant passport/ID photos directly in your browser. It's built with privacy as a core principle—all image processing happens on your device, ensuring your photos are never uploaded to a server.
- Live Camera Capture: Use your device's camera with real-time, format-adaptive alignment guides.
- Front & Back Camera Support: Easily switch between your device's front and back cameras.
- High-Resolution Photos: Utilizes the
ImageCaptureAPI (where available) for higher quality photos than a standard video frame snapshot. - Import & Reposition: Process any image file from your device with intuitive pan and zoom controls to get the perfect crop.
- Client-Side Processing: All photo processing happens locally in your browser, ensuring your photos are never uploaded to a server.
- Responsive Design & Mobile Wizard: A clean, responsive interface that transforms into a step-by-step wizard on mobile devices.
- PWA Support: Installable as a Progressive Web App for a native-like experience, including fullscreen mode on Android.
- Modern UI: A sleek, ruby-accented dark theme that adapts to your system settings.
- Fullscreen Mode: Toggleable for an immersive, distraction-free experience.
- Keyboard Shortcuts: Comprehensive shortcuts for nearly every action. Press
?in the app to see them all. - Personalization: Optionally add a person's name to be used in filenames and print preview titles.
- Optional Watermark: Add or remove an official-style "RUBY PASSPORT" watermark with a single click.
- Standard Formats: Comes with a wide range of built-in formats (US, EU/UK, Canada, China, and more).
- Custom Formats: Add, edit, and delete your own photo formats with precise pixel and physical print dimensions.
- Instant Previews: The live camera view and result panel adapt instantly to the selected format.
- Precise Print Preview: Generate a print-ready page with multiple photos tiled to exact physical dimensions.
- Download Image: Save the final photo with a dynamic, descriptive filename.
Ruby Passport is built with a modern, robust tech stack:
- Framework: Vite + React
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: Zustand
- UI Components: Radix UI for accessible primitives.
- Icons: Lucide React
- Drag & Drop: dnd-kit for reordering custom formats.
- Internationalization: i18next
Prerequisites:
- Node.js 18+ and npm
-
Clone the repository:
git clone https://github.com/stefanbc/rubypassport.git cd rubypassport -
Install dependencies:
npm install
| Script | Description |
|---|---|
npm run dev |
Runs the app in development mode at localhost. |
npm run build |
Builds the app for production. |
npm run preview |
Serves the production build locally for preview. |
npm run lint |
Checks the code for linting errors using Biome. |
npm run lint:fix |
Automatically fixes linting errors. |
npm run typescript:check |
Runs the TypeScript compiler to check for type errors. |
- Start the camera and allow permissions.
- Choose a photo format (e.g., Romania 35×45 mm).
- Align your face using the overlay guides and capture.
- Optionally set the person name for filenames and print titles.
- Toggle the official watermark if desired.
- Download the image or open Print Preview.
- The app uses browser camera APIs; ensure you grant permission.
- Printing accuracy depends on OS/Browser print scaling settings. Use 100% scale and disable “fit to page”.
- Watermark uses EB Garamond for an official-like style; UI uses Inter.
No photo data is uploaded; processing happens locally in the browser.
Contributions are welcome! If you have a feature request, bug report, or want to contribute code, please feel free to open an issue or submit a pull request.
Before submitting a PR, please ensure your code adheres to the project's style and that all checks pass:
npm run lint
npm run typescript:checkThis project is licensed under the MIT License. See the LICENSE file for details.