Mattrix

A modern, end-to-end encrypted Matrix chat client built with SolidJS.

Features

• End-to-End Encryption - Rust-based cryptography via WebAssembly (matrix-sdk-crypto-wasm)
• Device Verification - SAS emoji verification flow
• Discord-Style UI - 4-panel layout with resizable sidebars
• Rich Message Rendering
  • Full Markdown support (bold, italic, strikethrough, code, headings, lists, tables, blockquotes)
  • Syntax-highlighted code blocks (27 languages via highlight.js)
  • Image, video, audio, and file attachments
  • Encrypted media decryption
  • Matrix pills (@user and #room mentions)
  • Reply previews
• Bridge Support - Clean display names and icons for Discord, Telegram, Slack, IRC, Signal, WhatsApp bridges
• 18 Themes - Catppuccin, Gruvbox, Nord, Dracula, Tokyo Night, Rosé Pine, and more
• Typing Indicators & Read Receipts

Quick Start

Prerequisites

• Node.js 20+
• pnpm

Using Nix

nix-shell
pnpm install
pnpm run dev

Without Nix

pnpm install
pnpm run dev

Open http://localhost:5173

Building

pnpm run build

Output is in dist/.

Docker

Using Docker Compose (recommended)

docker compose up -d

The app will be available at http://localhost:8080

To use a different port:

MATTRIX_PORT=3000 docker compose up -d

Using Docker directly

# Build the image
docker build -t mattrix .

# Run the container
docker run -d -p 8080:8080 --name mattrix mattrix

Production Deployment

The Docker image uses a multi-stage build:

1. Build stage: Node.js 22 Alpine compiles the app
2. Serve stage: Nginx Alpine serves the static files

Features:

• Gzip compression for all assets
• Aggressive caching for hashed assets (1 year)
• No caching for index.html (for updates)
• SPA routing support
• WASM MIME type configured
• Security headers (X-Frame-Options, X-Content-Type-Options, Referrer-Policy)

Tech Stack

• Framework: SolidJS
• Matrix SDK: matrix-js-sdk v41
• Crypto: @matrix-org/matrix-sdk-crypto-wasm
• Build: Vite + TypeScript
• Syntax Highlighting: highlight.js

Project Structure

src/
├── components/       # UI components
│   ├── app/          # AppShell, main layout
│   ├── chat/         # ChatView, timeline
│   ├── composer/     # Message input
│   ├── message/      # Message rendering
│   └── ...
├── matrix/           # Matrix protocol integration
│   ├── client.ts     # Client initialization
│   ├── crypto.ts     # E2EE setup
│   ├── events.ts     # Event processing
│   ├── media.ts      # Media handling
│   └── ...
├── stores/           # State management (Solid signals)
├── themes/           # CSS theme files
└── utils/            # Utilities (markdown, emoji, etc.)

License

MIT