Overview
Skiff provides end-to-end encrypted communication and productivity tools:- Skiff Mail - Private, encrypted email
- Skiff Calendar - Encrypted calendar and scheduling
- Skiff Pages - Encrypted document editing
- Skiff Drive - Encrypted file storage
Monorepo Structure
The project uses Yarn workspaces to manage a monorepo containing multiple applications and shared libraries.Workspace Configuration
The rootpackage.json defines the workspace structure:
Applications
skemail-web
skemail-web
The Skiff Mail web application built with Next.js and React.Key Features:
- End-to-end encrypted email
- Rich text editor with TipTap
- File attachments
- Email search
- Custom domains and aliases
calendar-web
calendar-web
The Skiff Calendar web application for encrypted scheduling.Key Features:
- End-to-end encrypted events
- Google Calendar import
- ICS file support
- Event sharing
- Timezone support
skiff-pages-drive
skiff-pages-drive
Combined application for Skiff Pages (documents) and Drive (file storage).Key Features:
- End-to-end encrypted documents
- Collaborative editing
- File storage and management
- Version history
Shared Libraries
Thelibs/ directory contains shared libraries used across all applications:
skiff-crypto
skiff-crypto
Core cryptography library implementing Skiff’s encryption model.Responsibilities:
- End-to-end encryption
- Key generation and management
- Cryptographic operations
skiff-crypto-v2
skiff-crypto-v2
Next-generation cryptography library with enhanced features.
skiff-utils
skiff-utils
Common utilities and helper functions shared across applications.Includes:
- Type definitions
- Utility functions
- Constants and configurations
skiff-front-utils
skiff-front-utils
Frontend-specific utilities and hooks.Includes:
- React hooks
- Frontend utilities
- UI helpers
skiff-graphql
skiff-graphql
GraphQL schema definitions and resolvers.
skiff-front-graphql
skiff-front-graphql
Frontend GraphQL client setup and generated types.
skiff-mail-protos
skiff-mail-protos
Protocol Buffer definitions for mail data structures.
skiff-ics
skiff-ics
ICS (iCalendar) file format parsing and generation.
skiff-front-search
skiff-front-search
Private search indexing library for client-side search.Read more in Skiff’s blog post on private search.
skiff-prosemirror
skiff-prosemirror
ProseMirror editor extensions and utilities.
nightwatch-ui
nightwatch-ui
Reusable UI component library for the Skiff design system.
Build Order
Libraries must be built in dependency order:skiff-utilsskiff-mail-protosskiff-graphqlskiff-cryptoskiff-front-graphqlskiff-front-utils
yarn build:lib command handles this automatically.
Technology Stack
Frontend Framework
- React 17.0.2 - UI framework
- Next.js 12.x - Framework for skemail-web (file-based routing, SSR)
- Webpack 5.x - Module bundler for calendar-web and other apps
- TypeScript 5.0+ - Type-safe JavaScript
State Management
- Redux Toolkit - Application state management
- React Redux - React bindings for Redux
- Redux Logger - Development logging
GraphQL
- Apollo Client 3.x - GraphQL client
- GraphQL Code Generator - Type-safe GraphQL operations
- apollo-upload-client - File upload support
UI and Styling
- styled-components 5.3.3 - CSS-in-JS styling
- Emotion - Additional styling solution
- Material-UI (@mui/material) - Component library
- Framer Motion - Animation library
Rich Text Editing
- TipTap 2.x - Rich text editor framework
- ProseMirror - Editor foundation
- Bold, italic, underline, strike
- Headings, lists, blockquotes
- Links, images, tables
- Syntax highlighting
Cryptography
- tweetnacl - Cryptographic primitives
- @stablelib/chacha20poly1305 - Authenticated encryption
- argon2-browser - Password hashing
- ethers - Ethereum wallet integration
Data Formats
- Protocol Buffers (protobufjs) - Efficient serialization
- GraphQL - API query language
- ICS - Calendar format
Testing
- Jest 28.x - Test framework
- @testing-library/react - React component testing
- @swc/jest - Fast test compilation
Development Tools
- ESLint - Code linting
- Prettier - Code formatting
- Babel - JavaScript transpilation
- Webpack Dev Server - Development server with HMR
Cryptography Architecture
Skiff implements client-side, end-to-end encryption for all user data.Encryption Model
Key Generation
Users generate encryption keys locally in the browser. Private keys never leave the client.
Data Encryption
All sensitive data (emails, calendar events, files, documents) is encrypted client-side before being sent to servers.
Cryptographic Libraries
The cryptography layer is implemented in:libs/skiff-crypto- Original crypto implementationlibs/skiff-crypto-v2- Enhanced crypto features
- Key generation and derivation
- Symmetric encryption (ChaCha20-Poly1305)
- Asymmetric encryption (TweetNaCl)
- Password hashing (Argon2)
- Secure random number generation
GraphQL Architecture
Schema Federation
Skiff uses Apollo Federation to compose multiple GraphQL services into a unified graph. Thesupergraph.graphql file contains the federated schema.
Code Generation
GraphQL Code Generator creates TypeScript types from:- GraphQL schema definitions
- GraphQL query/mutation operations
- Fragment definitions
Client Configuration
Apollo Client is configured with:- HTTP link for GraphQL requests
- Upload link for file uploads
- Cache for query optimization
- Error handling and retry logic
Search Architecture
Skiff implements private, client-side search using theskiff-front-search library.
How It Works
- Indexing: Data is decrypted and indexed locally in the browser
- Search: Queries run against the local index using MiniSearch
- Privacy: Search never sends queries or data to servers
Features
- Full-text search
- Fuzzy matching
- Prefix search
- Result ranking
Package Management
Skiff uses Yarn Berry (Yarn 4.0.1) with workspaces:Workspace Features
- Dependency Hoisting: Shared dependencies are installed once at the root
- Local Linking: Libraries are automatically linked to applications
- Parallel Execution: Scripts can run across workspaces in parallel
- Topological Sorting: Dependencies are built in the correct order
Build and Deployment
Development
- Webpack Dev Server: Fast development server with HMR
- Source Maps: For debugging
- Mock Data: Local development uses mock data
Production
- Webpack: Production builds with optimization
- Code Splitting: Automatic code splitting for better performance
- Minification: Using Terser and CSS minimizer
- Compression: Gzip compression for assets
- Service Workers: Workbox for offline support
Vercel Integration
Skiff applications can be deployed to Vercel:Security Model
Skiff’s security model is based on:- End-to-End Encryption: All data encrypted client-side
- Zero-Knowledge: Servers cannot decrypt user data
- Open Source: Code is publicly auditable
- Privacy-First: No tracking or analytics on user data
- Crypto Wallet Support: Anonymous sign-up with Ethereum wallets