Developer Overview

Technical reference for Skelenote contributors.

Quick Start

Ship your first PR in 30 minutes.

1. Environment Setup

Prerequisites:

Node.js 18+
Rust (latest stable) - Install Rust
pnpm (recommended) or npm/yarn

Platform Specifics:

macOS: xcode-select --install
Windows: Microsoft C++ Build Tools and WebView2
Linux: sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file libssl-dev libayatana-appindicator3-dev librsvg2-dev
Mobile: Xcode 15+ (iOS), Android Studio (Android) - see Mobile Development

2. Clone & Install

git clone https://github.com/skeletor-js/skelenote.git
cd skelenote
pnpm install

3. Run the App

pnpm tauri dev              # Desktop app with hot reload
# OR
pnpm tauri ios dev          # iOS simulator
pnpm tauri android dev      # Android emulator

The desktop app window should open in ~30 seconds. Note: Rust changes require restarting the dev server. React changes hot reload instantly.

4. Make a Change

Example: Add a Keyboard Shortcut Edit src/contexts/KeyboardShortcutsContext.tsx:

{
  key: 'd',
  modifiers: ['meta', 'shift'],
  action: () => console.log('Debug mode toggled!'),
  description: 'Toggle debug mode',
}

Example: Add a Tauri Command

Rust: Add function in src-tauri/src/lib.rs and register in invoke_handler.
Frontend: Call it with invoke('my_command', { ... }).

5. Test & Submit

Before pushing, ensure these pass:

pnpm lint                    # ESLint
pnpm exec tsc --noEmit       # TypeScript
pnpm test:run                # Vitest

Then create a PR using the template.

Project Overview

Tech Stack

Layer

Technology

Desktop Shell

Tauri 2.0 (Rust)

Mobile

Tauri 2.0 mobile (iOS/Android)

Frontend

React 18 + TypeScript + Vite

UI Framework

Mantine 8

Editor

BlockNote

Data Layer

Loro CRDT

Encryption

XChaCha20-Poly1305, BIP39

Hearth

mDNS/Bonjour + Direct TCP

Project Structure

skelenote/
├── src/                    # React frontend
│   ├── components/         # UI components (including mobile/)
│   ├── contexts/           # React contexts (12 total)
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Core libraries
│   │   ├── loro/           # CRDT document store
│   │   ├── sync/           # P2P sync client
│   │   ├── crypto/         # Encryption wrapper
│   │   ├── export/         # Export formats (MD, HTML, JSON, PDF)
│   │   └── ...             # See AGENTS.md for full list
│   └── styles/             # Global CSS
├── src-tauri/              # Rust backend
│   ├── src/
│   │   ├── crypto/         # BIP39, HKDF, XChaCha20-Poly1305
│   │   ├── network/        # mDNS discovery, TCP, QR pairing
│   │   └── lib.rs          # Tauri commands
│   └── gen/                # Mobile platform code (iOS/Android)
└── docs/                   # Documentation

Key Conventions

Code Style

Path aliases: Use @/ (e.g., import { useObjects } from '@/contexts').
UI: Use Mantine components, not raw HTML.
Icons: Use lucide-react.
Design: See Style Guide.

Testing

pnpm test                   # Run tests (watch mode)
pnpm test:run               # Run tests once (CI mode)
pnpm bench                  # Run benchmarks

Rust tests: cd src-tauri && cargo test

See testing.md for the comprehensive testing guide.