# meganz/webclient architecture

> Architecture diagram of the GitHub repository meganz/webclient, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/meganz/webclient
- Repository: https://github.com/meganz/webclient

## Overview

1. This repository is the MEGA web client: a large client-side application served as static assets, not a traditional server-rendered app. The main architectural boundary is between browser-executed UI/logic and MEGA’s backend APIs, with the client responsible for encryption, state management, and most UI rendering.

2. Bootstrapping is centered on `secureboot.js`, which loads versioned HTML/JS/CSS/resources from static content servers and verifies their hashes before execution. The repo’s `index.html`, `html/*.html`, and top-level `secureboot.js` form the entry-point layer; the live site is generated from this repo into hash-stamped assets.

3. The app is organized as a multi-surface frontend rather than one single view. Major surfaces include:
   - File Manager (`js/fm.js`, `js/mega.js`, `js/fm/*`, `html/fm.html`)
   - Chat/Meetings (`js/chat/*`, `worker.sfuClient.bundle.js`, `worker.recorder.bundle.js`)
   - Mobile (`js/mobile/*`, `html/mobile.html`)
   - Public/marketing/transactional pages such as login, signup, pricing, recovery, download, embed player, etc. (`html/*.html`, `html/js/*`)

4. The File Manager is the core application subsystem. `js/mega.js` holds the `MegaData` model and most data handling; `js/fm/*` contains file/folder operations, dialogs, devices, gallery, shares, S4 object storage UI, recents, versioning, and account-related views. This subsystem binds the remote node metadata model to the visible file tree, dialogs, and action menus.

5. Data persistence and caching are handled client-side through `js/mDB.js`, `js/idbkvstorage.js`, and related utilities. The client caches metadata and other state in IndexedDB/local storage to support responsiveness and offline-ish behavior, while `js/utils/*` provides shared abstractions for storage, events, network, locale, and DOM helpers.

6. End-to-end encryption is a first-class architectural boundary. `js/crypto.js`, `js/keymgr.js`, `js/security.js`, `js/paycrypt.js`, `sjcl.js`, `aesasm.js`, `rsaasm.js`, `nacl-fast.js`, and `naclworker.js` support key generation, content encryption/decryption, authentication, and secure transfer flows. Encryption is not just a transport concern; it is embedded into upload/download, thumbnail generation, chat, and password-manager features.

7. Upload and download are separate pipelines with their own workers and transport strategies. `encrypter.js` and `decrypter.js` run as web workers for file processing; `js/transfers/*` contains chunking, queueing, retry, filesystem/indexeddb/memory backends, and XHR/WebSocket helpers. This is the main data plane for moving encrypted file content between the browser and MEGA storage.

8. Chat and meetings are a distinct subsystem with its own runtime model and UI tree. `js/chat/chat.jsx`, `js/chat/ui/*`, and plugins under `js/chat/plugins/*` implement messaging, search, reactions, rich previews, presence, notifications, and MEGAchat-specific workflows. Audio/video calling is split into an SFU client (`js/chat/sfuClient.js`) and worker bundles for crypto and recording, which isolates realtime media/signaling concerns from the main app.

9. The mobile client is not just responsive CSS; it has dedicated code paths. `js/mobile/*` and `css/mobile/*` provide mobile-specific navigation, dialogs, cloud browsing, account flows, recovery, transfer overlays, and settings. This suggests a separate interaction model and routing layer for smaller devices rather than a single adaptive UI.

10. UI composition is shared but layered. Generic UI primitives live under `js/ui/*` and `js/ui/components/*`, while product-specific widgets live in `js/chat/ui/*`, `js/fm/*`, `js/mobile/*`, and `js/ui/pwm/*`. Styling is equally segmented with large CSS bundles for core app, chat, mobile, transfers, password manager, and feature-specific pages.

11. There is a public-transfer/site subsystem separate from the main cloud-drive UI. `js/ui/transfer/*` contains its own boot, pages, dialogs, overlays, subpages, fonts, and CSS, indicating an independently themed transfer experience with its own navigation and content pages. The `html/download.html`, `html/embedplayer.html`, `html/planpricing.html`, and related files fit the same “public-facing app surface” pattern.

12. The repository also includes specialized product modules that should appear as separate boxes in an architecture diagram:
   - Password manager UI under `js/ui/pwm/*` and `css/pwm/*`
   - S4/object-storage management under `js/fm/s4/*` and `js/utils/s4.js`
   - Rewind/history features under `js/rewind/*`
   - Document/image viewers and previews via `pdf.worker.js`, `js/ui/docx.viewer.js`, `js/ui/xlsx.viewer.js`, and related HTML/CSS

13. Workers and background helpers are important architectural nodes. Besides encryption/decryption workers, the repo contains `pdf.worker.js`, `worklet.js`, `worker.sfuClient.bundle.js`, `worker.recorder.bundle.js`, and service-worker support in `sw.js`. These offload CPU-heavy or asynchronous tasks from the main UI thread.

14. Build, QA, and deployment are client-build oriented. `Gruntfile.js`, `webpack.config.js`, `karma.conf.js`, `Makefile`, `scripts/*`, and `test/*` indicate a build/test pipeline for bundling assets, generating language files, running unit/integration tests, and preparing deployable static outputs. The `dont-deploy/` tree contains prototypes and manual test artifacts excluded from production packaging.

15. In infrastructure terms, the app expects to be hosted as static content behind Apache/nginx or MEGA’s own static servers, with routing handled by HTML entry points and client-side code. The README’s local setup instructions and the presence of `.htaccess`, `manifest.json`, `sw.js`, and many versioned asset directories show a deployment model optimized for cached static delivery and browser-side application logic.

Main entry points: [`html`](https://github.com/meganz/webclient/tree/master/html) (HTML surfaces), [`js/fm.js`](https://github.com/meganz/webclient/blob/master/js/fm.js) (File manager), [`js/chat/chat.jsx`](https://github.com/meganz/webclient/blob/master/js/chat/chat.jsx) (Chat app), [`js/crypto.js`](https://github.com/meganz/webclient/blob/master/js/crypto.js) (Crypto stack)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_boot["Boot & delivery"]
  node_index_html["Index<br/>entry html<br/>[index.html]"]
  node_secureboot_js["Secure boot<br/>bootstrap loader<br/>[secureboot.js]"]
  node_html_surfaces["HTML surfaces<br/>entry pages"]
end

subgraph group_core["Core cloud client"]
  node_fm_core["File manager<br/>cloud drive app<br/>[fm.js]"]
  node_mega_data["MegaData<br/>state model<br/>[mega.js]"]
  node_fm_modules["FM modules<br/>file workflows"]
  node_ui_core["UI core<br/>shared components"]
end

subgraph group_media["Media & collaboration"]
  node_chat_app["Chat app<br/>messaging client<br/>[chat.jsx]"]
  node_chat_ui["Chat UI<br/>chat views"]
  node_chat_plugins["Chat plugins<br/>message filters"]
  node_meetings_sfu["Meetings SFU<br/>realtime media<br/>[sfuClient.js]"]
end

subgraph group_public["Public surfaces"]
  node_mobile_app["Mobile app<br/>mobile client<br/>[mobile.js]"]
  node_transfer_ui["Transfer UI<br/>public transfer site<br/>[boot.js]"]
  node_public_pages["Public pages<br/>site pages<br/>[login.html]"]
end

subgraph group_platform["Platform services"]
  node_crypto_stack["Crypto stack<br/>encryption core<br/>[crypto.js]"]
  node_storage_cache[("Storage cache<br/>local persistence<br/>[mDB.js]")]
  node_transfer_pipeline["Transfer pipeline<br/>data plane"]
  node_workers["Workers<br/>background tasks<br/>[encrypter.js]"]
  node_build_tooling["Build tools<br/>build pipeline<br/>[webpack.config.js]"]
end

node_index_html -->|"loads"| node_secureboot_js
node_secureboot_js -->|"boots"| node_html_surfaces
node_html_surfaces -->|"opens"| node_fm_core
node_html_surfaces -->|"opens"| node_chat_app
node_html_surfaces -->|"opens"| node_mobile_app
node_html_surfaces -->|"renders"| node_public_pages
node_html_surfaces -->|"renders"| node_transfer_ui
node_fm_core -->|"uses"| node_mega_data
node_fm_core -->|"delegates"| node_fm_modules
node_fm_core -->|"composes"| node_ui_core
node_fm_core -->|"protects"| node_crypto_stack
node_mega_data -->|"persists"| node_storage_cache
node_fm_modules -->|"moves data"| node_transfer_pipeline
node_chat_app -->|"composes"| node_chat_ui
node_chat_app -->|"extends"| node_chat_plugins
node_chat_app -->|"coordinates"| node_meetings_sfu
node_chat_app -->|"secures"| node_crypto_stack
node_mobile_app -->|"reuses"| node_ui_core
node_mobile_app -->|"secures"| node_crypto_stack
node_transfer_ui -->|"reuses"| node_ui_core
node_transfer_ui -->|"drives"| node_transfer_pipeline
node_transfer_pipeline -->|"offloads"| node_workers
node_crypto_stack -->|"accelerates"| node_workers
node_build_tooling -->|"packages"| node_index_html
node_build_tooling -->|"bundles"| node_html_surfaces
node_build_tooling -->|"builds"| node_workers

click node_index_html "https://github.com/meganz/webclient/blob/master/index.html"
click node_secureboot_js "https://github.com/meganz/webclient/blob/master/secureboot.js"
click node_html_surfaces "https://github.com/meganz/webclient/tree/master/html"
click node_fm_core "https://github.com/meganz/webclient/blob/master/js/fm.js"
click node_mega_data "https://github.com/meganz/webclient/blob/master/js/mega.js"
click node_fm_modules "https://github.com/meganz/webclient/tree/master/js/fm"
click node_ui_core "https://github.com/meganz/webclient/tree/master/js/ui"
click node_chat_app "https://github.com/meganz/webclient/blob/master/js/chat/chat.jsx"
click node_chat_ui "https://github.com/meganz/webclient/tree/master/js/chat/ui"
click node_chat_plugins "https://github.com/meganz/webclient/tree/master/js/chat/plugins"
click node_meetings_sfu "https://github.com/meganz/webclient/blob/master/js/chat/sfuClient.js"
click node_mobile_app "https://github.com/meganz/webclient/blob/master/js/mobile/mobile.js"
click node_transfer_ui "https://github.com/meganz/webclient/blob/master/js/ui/transfer/boot.js"
click node_public_pages "https://github.com/meganz/webclient/blob/master/html/login.html"
click node_crypto_stack "https://github.com/meganz/webclient/blob/master/js/crypto.js"
click node_storage_cache "https://github.com/meganz/webclient/blob/master/js/mDB.js"
click node_transfer_pipeline "https://github.com/meganz/webclient/tree/master/js/transfers"
click node_workers "https://github.com/meganz/webclient/blob/master/encrypter.js"
click node_build_tooling "https://github.com/meganz/webclient/blob/master/webpack.config.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html,node_secureboot_js,node_html_surfaces toneBlue
class node_fm_core,node_mega_data,node_fm_modules,node_ui_core toneAmber
class node_chat_app,node_chat_ui,node_chat_plugins,node_meetings_sfu toneMint
class node_mobile_app,node_transfer_ui,node_public_pages toneRose
class node_crypto_stack,node_storage_cache,node_transfer_pipeline,node_workers,node_build_tooling toneIndigo
```

## Components

### Boot & delivery

Static entry points, secure loading, and generated asset delivery.

- [Index](https://github.com/meganz/webclient/blob/master/index.html): entry html · Main browser entry page for the client. · `index.html`
- [Secure boot](https://github.com/meganz/webclient/blob/master/secureboot.js): bootstrap loader · Verifies and loads versioned static assets before app execution. · `secureboot.js`
- [HTML surfaces](https://github.com/meganz/webclient/tree/master/html): entry pages · Top-level HTML entry points for major app and public surfaces. · `html`

### Core cloud client

File manager, shared data model, UI primitives, and client-side state.

- [File manager](https://github.com/meganz/webclient/blob/master/js/fm.js): cloud drive app · Main cloud-drive interface and orchestration layer. · `js/fm.js`
- [MegaData](https://github.com/meganz/webclient/blob/master/js/mega.js): state model · Primary data model and node/account state handling. · `js/mega.js`
- [FM modules](https://github.com/meganz/webclient/tree/master/js/fm): file workflows · File operations, dialogs, galleries, shares, recents, devices, S4, and account views. · `js/fm`
- [UI core](https://github.com/meganz/webclient/tree/master/js/ui): shared components · Reusable UI primitives, dialogs, renderers, and view composition. · `js/ui`

### Media & collaboration

Chat, meetings, viewers, and related realtime media features.

- [Chat app](https://github.com/meganz/webclient/blob/master/js/chat/chat.jsx): messaging client · Messaging, routing, conversations, and chat app bootstrap. · `js/chat/chat.jsx`
- [Chat UI](https://github.com/meganz/webclient/tree/master/js/chat/ui): chat views · Conversation panels, lists, overlays, search, and meeting UI. · `js/chat/ui`
- [Chat plugins](https://github.com/meganz/webclient/tree/master/js/chat/plugins): message filters · Presence, notifications, rich previews, reactions, and formatting helpers. · `js/chat/plugins`
- [Meetings SFU](https://github.com/meganz/webclient/blob/master/js/chat/sfuClient.js): realtime media · Audio/video calling client and SFU signaling runtime. · `js/chat/sfuClient.js`

### Public surfaces

Standalone login, pricing, recovery, download, and transfer experiences.

- [Mobile app](https://github.com/meganz/webclient/blob/master/js/mobile/mobile.js): mobile client · Dedicated mobile navigation, account flows, and cloud browsing. · `js/mobile/mobile.js`
- [Transfer UI](https://github.com/meganz/webclient/blob/master/js/ui/transfer/boot.js): public transfer site · Standalone transfer/product experience with its own pages and theming. · `js/ui/transfer/boot.js`
- [Public pages](https://github.com/meganz/webclient/blob/master/html/login.html): site pages · Login, signup, pricing, recovery, download, embed, and similar web pages. · `html/login.html`

### Platform services

Crypto, persistence, transfers, workers, and build tooling.

- [Crypto stack](https://github.com/meganz/webclient/blob/master/js/crypto.js): encryption core · Key management, authentication, and file/message encryption primitives. · `js/crypto.js`
- [Storage cache](https://github.com/meganz/webclient/blob/master/js/mDB.js): local persistence · IndexedDB/local storage abstractions and cached client state. · `js/mDB.js`
- [Transfer pipeline](https://github.com/meganz/webclient/tree/master/js/transfers): data plane · Chunking, queuing, retries, and upload/download transport logic. · `js/transfers`
- [Workers](https://github.com/meganz/webclient/blob/master/encrypter.js): background tasks · Encryption, decryption, SFU, recording, PDF, and service-worker execution. · `encrypter.js`
- [Build tools](https://github.com/meganz/webclient/blob/master/webpack.config.js): build pipeline · Bundling, testing, localization, and deployment preparation. · `webpack.config.js`

## Connections

- Index → Secure boot: loads · The entry page hands off to secure boot for asset verification.
- Secure boot → HTML surfaces: boots · Secure boot resolves the versioned HTML and resource surfaces.
- HTML surfaces → File manager: opens · The main HTML shell can launch the cloud-drive client.
- HTML surfaces → Chat app: opens · Chat-specific entry points load the messaging runtime.
- HTML surfaces → Mobile app: opens · Mobile HTML entry points load the mobile client.
- HTML surfaces → Public pages: renders · Standalone HTML pages serve login, recovery, pricing, and related flows.
- HTML surfaces → Transfer UI: renders · Public transfer pages are bootstrapped from their own HTML bundle.
- File manager → MegaData: uses · The file manager is driven by the central application data model.
- File manager → FM modules: delegates · File manager behavior is split across feature modules and dialogs.
- File manager → UI core: composes · The file manager renders through shared UI primitives and containers.
- File manager → Crypto stack: protects · Uploads, downloads, and node actions depend on client-side encryption.
- MegaData → Storage cache: persists · Client state and metadata are cached locally for responsiveness.
- FM modules → Transfer pipeline: moves data · File operations connect to upload/download and chunk transport flows.
- Chat app → Chat UI: composes · Chat runtime renders conversation, sidebar, and meeting interfaces.
- Chat app → Chat plugins: extends · Plugins provide message processing, presence, and notifications.
- Chat app → Meetings SFU: coordinates · Chat integrates with the realtime calling and SFU subsystem.
- Chat app → Crypto stack: secures · Chat message and call flows rely on the shared crypto boundary.
- Mobile app → UI core: reuses · Mobile-specific screens still rely on shared UI building blocks.
- Mobile app → Crypto stack: secures · Mobile recovery, login, and transfers use the encryption stack.
- Transfer UI → UI core: reuses · The transfer site uses its own themed UI layer built from shared ideas.
- Transfer UI → Transfer pipeline: drives · Transfer pages orchestrate upload/link creation workflows.
- Transfer pipeline → Workers: offloads · Heavy file processing and async transport work is pushed into workers.
- Crypto stack → Workers: accelerates · Crypto primitives are also executed in worker contexts.
- Build tools → Index: packages · Build tooling produces the deployable static entry pages and assets.
- Build tools → HTML surfaces: bundles · The build pipeline generates the HTML-backed surface bundles.
- Build tools → Workers: builds · Worker bundles are compiled and packaged as part of the client build.