wiki/Catalogue-Self-Hosted/apps/app-ocular.md

---
title: Ocular
created: 2026-06-07
updated: 2026-06-07
type: app
tags: [catalogue, budgeting, typescript, react, svelte, suivi, budget, simple]
confidence: medium
contested: false
sources: [https://selfh.st/apps/?tag=budgeting, https://github.com/dkanr/ocular, https://ocular.dkanr.dev/]
---

# Ocular 👁️

> Application de **suivi de budget** légère écrite en **TypeScript/SvelteKit**. Conçue pour être **simple à déployer** et **agréable à utiliser**, avec une UI moderne et un focus sur l'essentiel.

| Métadonnée | Valeur |
| :--- | :--- |
| **Site web** | https://ocular.dkanr.dev/ |
| **GitHub** | https://github.com/dkanr/ocular |
| **License** | AGPL-3.0 |
| **Langage** | TypeScript (SvelteKit) |
| **Étoiles** | ⭐41 |
| **Dernière MAJ** | 2026-04-05 |
| **Catégorie** | [[cat-budgeting]] |

## Description

Ocular est une application de **suivi de budget personnel** relativement jeune mais prometteuse, écrite en **SvelteKit** (le meta-framework de Svelte) avec TypeScript. Le projet se positionne sur la **simplicité d'usage** et la **modernité de l'UI** — un juste milieu entre la complexité de Firefly III et le minimalisme d'ExpenseOwl.

Les fonctionnalités principales : **comptes** multiples (chèque, épargne, cartes, crédit), **transactions** avec date, montant, description, catégorie, **catégories** personnalisables, **budgets** par catégorie et par mois avec **barre de progression**, **tableau de bord** avec vue d'ensemble (solde total, revenus/dépenses du mois), **graphiques** simples (revenus vs dépenses, répartition par catégorie), **revenus/dépenses récurrentes** (abonnements, salaires), **multi-devises** basique, **mode sombre** natif, **export CSV**.

L'**architecture SvelteKit** est un excellent choix : code TypeScript cohérent, **bundle final très léger** (~50-100 Ko pour le frontend), **SSR** (Server-Side Rendering) natif, **API routes** intégrées, **adapter Node** ou **adapter static** pour le déploiement. Parfait pour un **VPS modeste** ou un **Raspberry Pi 4/5**.

L'**avantage** d'Ocular sur ses concurrents : **UI moderne et fluide** (Svelte = transitions animées par défaut), **build léger** (consomme peu de RAM et CPU), **stack TypeScript moderne** appréciée des développeurs. L'**inconvénient** : projet très jeune (~41⭐), peu de retours utilisateurs — à tester avant production critique, et la **roadmap** est moins claire que celle d'Actual ou Firefly.

Ocular est adapté aux utilisateurs qui veulent un **outil moderne, léger, et simple** pour suivre leur budget, sans les complications d'import bancaire ou de règles avancées. Parfait comme **premier outil de budgeting self-hosted** ou comme alternative à une feuille de calcul.

## Installation

### Via Docker (recommandé)

```yaml
# docker-compose.yml
services:
  ocular:
    image: ghcr.io/dkanr/ocular:latest
    container_name: ocular
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=file:/data/ocular.db
      - ORIGIN=https://budget.example.com
      - SESSION_SECRET=***    volumes:
      - ocular-data:/data
    healthcheck:
      test: ["CMD", "wget", "--spider", "-q", "http://localhost:3000/"]
      interval: 30s
      timeout: 10s
      retries: 3

volumes:
  ocular-data:
```

> ⚠️ Vérifier l'image exacte sur le [GHCR](https://github.com/dkanr/ocular/pkgs/container/ocular) (le tag `latest` peut évoluer, la nomenclature des env vars aussi).

### Installation manuelle (Node.js / SvelteKit)

1. **Pré-requis** : Node.js 20+, npm ou pnpm, SQLite (inclus).
2. `git clone https://github.com/dkanr/ocular.git && cd ocular`
3. `npm install` (ou `pnpm install`)
4. Configurer `.env` :
   ```env
   DATABASE_URL=file:./data/ocular.db
   ORIGIN=http://localhost:3000
   SESSION_SECRET=***
   ```
5. Migrations : `npx prisma migrate deploy` (ou équivalent selon l'ORM).
6. Build : `npm run build`
7. `npm start` (production) ou `node build/index.js`.
8. Reverse proxy Nginx/Caddy/Traefik en front (HTTPS obligatoire).

## Configuration

- **Premier lancement** : créer le compte owner via l'UI d'inscription.
- **SESSION_SECRET** : clé de session SvelteKit — générer aléatoirement (32+ caractères), ne jamais commit.
- **ORIGIN** : URL externe utilisée pour les cookies/CSRF (doit correspondre à l'URL d'accès).
- **Comptes** : créer un compte par produit bancaire, saisir le solde initial.
- **Catégories** : créer l'arborescence, personnaliser icônes/couleurs.
- **Budgets** : par mois, par catégorie, avec barre de progression.
- **Récurrences** : configurer salaires, abonnements.
- **HTTPS** : obligatoire via reverse proxy (Traefik/Caddy).
- **Backups** : copier le fichier SQLite `ocular.db` régulièrement (cron + rclone).

## Alternatives

### Open Source
- [[app-actual-budget]] — référence local-first (TypeScript aussi)
- [[app-firefly-iii]] — gestion finances complète (PHP)
- [[app-sure]] — plateforme Elixir moderne
- [[app-expenseowl]] — minimaliste Python
- [[app-budget-board]] — dashboard TypeScript
- [[app-monetr]] — alternative Go
- [[app-myfin]] — alternative Python/Django
- **Buckwheat** / **Cashcog** — envelope budgeting Python
- **Cashfolio** / **Squirrel** — autres alternatives

### Propriétaires
- **YNAB** — référence du zero-based (~14$/mois)
- **Monarch Money** — UX premium (~99$/an)
- **Mint** (ex-Intuit) — abandonné
- **PocketGuard** — mobile-first
- **Wallet** by BudgetBakers — app mobile tchèque

## Sécurité

- **HTTPS obligatoire** via reverse proxy.
- **SESSION_SECRET** : clé de session SvelteKit critique — générer aléatoirement (32+ caractères), ne pas commit.
- **ORIGIN** : bien configurer pour éviter les attaques CSRF.
- **SQLite** : sécuriser les permissions (chmod 600) sur le volume.
- **2FA** : non natif, à compenser via reverse proxy (Authelia/Authentik).
- **Backups 3-2-1** : copier régulièrement le fichier DB vers stockage chiffré.
- **Updates SvelteKit** : suivre les releases (SvelteKit évolue vite), projet jeune → vérifier les breaking changes.
- **CSP et headers** : configurer via reverse proxy (Caddy/Traefik middleware).
- **Logs** : logs SvelteKit standards, monitorer via Grafana Loki ou équivalent.
- **Dépendance npm** : SvelteKit + Svelte + Vite → mettre à jour régulièrement (npm audit).

## Ressources
- Site officiel : https://ocular.dkanr.dev/
- GitHub : https://github.com/dkanr/ocular
- Documentation : https://github.com/dkanr/ocular/wiki
- selfh.st : https://selfh.st/apps/?tag=budgeting

## Pages Liées
- [[cat-budgeting]] — catégorie parente
- [[app-actual-budget]] — concurrent direct (TypeScript aussi)
- [[app-firefly-iii]] — référence du marché (PHP)
- [[app-expenseowl]] — alternative minimaliste (Python)
- [[app-budget-board]] — autre option TypeScript
- [[app-sure]] — alternative Elixir
- [[recettes-docker-compose]] — templates de déploiement
- [[securisation-home-lab]] — bonnes pratiques