Skip to main content

​
Proton WebClients Applications

The Proton WebClients monorepo contains multiple React-based web applications that make up the Proton ecosystem. Each application is built using a shared component library and follows consistent architectural patterns.

Proton Mail

Secure email application with end-to-end encryption

Proton Calendar

Encrypted calendar with event management and scheduling

Proton Drive

Secure cloud storage with file sharing and collaboration

Proton Pass

Password manager and credential vault

Proton VPN

VPN settings and configuration interface

Proton Wallet

Bitcoin wallet with privacy features

​
Architecture

All applications share a common architecture:
1

Workspace Organization

Applications are located in applications/ directory, each with its own package.json and source code
2

Shared Packages

All apps use workspace packages like @proton/components, @proton/shared, @proton/atoms, and @proton/styles
3

Build System

Applications use @proton/pack (proton-pack) for building and bundling with Webpack
4

State Management

Most apps use Redux Toolkit (@reduxjs/toolkit) with shared Redux stores

​
Common Technologies

​
Core Stack

  • React 18.3.1 - UI framework
  • TypeScript 5.9.3 - Type safety
  • React Router - Client-side routing
  • Redux Toolkit - State management (most apps)
  • ttag - Internationalization

​
Build & Development

{
  "scripts": {
    "start": "proton-pack dev-server",
    "build:web": "proton-pack build",
    "test": "jest",
    "check-types": "tsc",
    "lint": "eslint"
  }
}

​
Testing

All applications use:
  • Jest - Testing framework
  • @testing-library/react - Component testing
  • @testing-library/user-event - User interaction testing

​
Development Workflow

All applications support both standalone and SSO (single sign-on) modes for development and production.

​
Starting an Application

# From the monorepo root
yarn workspace proton-mail start

# Or from the application directory
cd applications/mail
yarn start

​
Building for Production

yarn workspace proton-mail build:web

​
Running Tests

yarn workspace proton-mail test

​
Shared Infrastructure

All applications leverage shared packages:
PackagePurpose
@proton/componentsUI components library
@proton/sharedShared utilities and constants
@proton/atomsAtomic design components
@proton/stylesCSS styles and themes
@proton/cryptoCryptographic operations
@proton/hooksReact hooks library
@proton/iconsIcon components
@proton/packBuild and bundling tool

​
Application Modes

Applications can run in different modes:
  • Standalone Mode - Independent application with its own authentication
  • SSO Mode - Integrated with Proton account single sign-on
  • Desktop Mode - Some apps have Electron desktop versions (Mail, Pass, Meet)

​
License

All applications are licensed under GPL-3.0.

Build docs developers (and LLMs) love

Get started for freeTalk to us