A minimal portfolio tracker and trading journal.
It combines a trading journal ๐ and a long-term portfolio overview ๐ช into one calm, keyboard-first tool. Local-first: your data and your broker credentials never leave your browser. ๐ Connects directly to your Interactive Brokers to import positions and trades.
- ๐๏ธ Multi-account โ built for the realistic IBKR setup of one trading account + N long-term accounts. A top-level switcher scopes every view; each account has its own color, cash, contributions, and sync. Full account CRUD.
- ๐ IBKR import (BYOK) โ connect via an IBKR Flex Query token + Query ID (yours, stored locally). Imports positions, cash, and trade fills, coalescing executions into trades and computing realized P&L from your actual fills.
- ๐งฎ Options pricing (BYOK) โ open option positions are marked to market via a free MarketData.app token (also yours, stored locally) โ a live mark plus a price-history chart. Closed option trades use your IBKR fills, never an external call. The app is fully functional with no token; option charts simply show a calm "add a token" hint.
- ๐ท๏ธ Custom tickers โ add any holding or trade manually by ticker symbol (no broker required), priced live via the public equity feed, with an inline TradingView chart link.
- ๐ Trading journal โ weekly absolute P&L (rolling bars), a calendar of realized P&L, a sortable trade table with setups/tags, and per-trade charts (intraday + daily).
- ๐ Holdings โ combined, sortable table with day/unrealized deltas and expandable per-position price charts.
- โจ๏ธ Keyboard-first โ
โKcommand palette (fuzzy search across symbols, accounts, actions),g-prefix navigation, and single-key shortcuts throughout.
Everything persists locally (browser storage today); no account, no server, no telemetry. ๐
| Overview โ combined value, deltas, allocation | Holdings โ sortable table + expandable charts |
| Trading journal โ weekly P&L + trade table | Calendar โ realized P&L by day |
๐ก No screenshots yet? Run
pnpm devโ the app ships with demo data, so every view is alive on first launch.
Picofolio has no backend, no account, and no telemetry. Everything โ your positions, trades, journal entries, account setup, and broker credentials โ lives entirely in your own browser's local storage. There is no Picofolio server to send it to, and nothing is ever phoned home.
The only network calls the app makes are the ones you trigger to your data sources: IBKR (with your Flex token), MarketData.app (with your token), and the public equity price feed. Each request goes straight to that service and nowhere else. Tokens are sent only to the service they belong to.
That's the whole point of the local-first design: no server means no incentive to monetize your data, and no data liability means there's nothing to breach. Your portfolio is yours alone. ๐
Picofolio talks to two external services, and you supply the credentials for both:
| Data | Source | Token | Required? |
|---|---|---|---|
| Positions, cash, trade fills, realized P&L | IBKR Flex Query | Flex token + Query ID | For broker sync (manual entry works without it) |
| Equity prices & history | Public market feed | โ | No |
| Open-option live mark & history | MarketData.app | Free API token | Only for live option marking |
Tokens are stored locally and sent only to the service they belong to. Add them in Settings. (Secrets currently live in browser local storage โ fine for local use; see Planned for hardening.)
- โ๏ธ React 19 + TypeScript (strict), Vite
- ๐ป Zustand for state + local persistence
- ๐ lightweight-charts for price/value charts
- ๐งญ react-router, lucide-react (icons)
- ๐จ Hand-written CSS driven by design tokens โ no component library (shadcn/Material/etc.). Custom components are the whole point.
Today Picofolio runs as a local-first web app via Vite; external calls (IBKR, MarketData.app, equity prices) go through the Vite dev proxy.
pnpm install
pnpm dev # http://localhost:5173Other scripts:
pnpm build # tsc -b && vite build
pnpm typecheck # tsc -b --noEmit
pnpm preview # preview the production buildThe app ships with demo data so the UI is alive immediately. To use real data, open Settings and add an IBKR Flex connection (and, optionally, a MarketData.app token for live option pricing).
- IBKR Flex Query โ in IBKR Client Portal: Performance & Reports โ Flex Queries. Create an Activity/Positions query, then generate a Flex Web Service token. You'll paste the token + the Query ID into Settings.
- MarketData.app โ sign up at marketdata.app (free tier, no card) and paste the token into Settings โ Options pricing. Optional.
| Key | Action |
|---|---|
โK / Ctrl K |
Command palette |
n |
New trade |
g o |
Overview |
g a |
Activity (journal) |
g c |
Calendar |
g h |
Holdings |
g s |
Settings |
๐ฏ Design north stars: Fey (aesthetic), Linear (keyboard-first speed), Raycast (command palette), Bloomberg (numeric density). The bias is always toward restraint โ darker, calmer, more typographic.
The design system is the heart of the project. Single source of truth: src/styles/tokens.css and src/styles/primitives.css. A static reference page lives at docs/showcase.html โ open it in a browser to see the tokens composed into the actual UI.
The full design & engineering contract is in AGENTS.md: color and typography rules, the chiaroscuro lighting approach, motion/easing, density philosophy, and the product scope.
Not yet implemented โ on the radar, roughly in priority order:
- ๐ฅ๏ธ Desktop packaging (Tauri) โ ship Picofolio as a native desktop app. The external calls (IBKR, MarketData.app, equity prices) would move from the Vite dev proxy to typed Rust commands, and secrets would move from browser local storage to the OS keychain. Deprioritized for now; the web app is the supported way to run today.
- TradingView Advanced Charts โ embedded charts currently use the free TradingView widget, which renders all same-type moving averages in one color (no per-MA styling via URL/config). Per-MA colors require TradingView's licensed, self-hosted Charting Library (
createStudy(..., { "plot.color": ... })). Access is free but approval-gated and needs a public, working deployment to point at โ so once we have a hosted version online, apply for the Advanced Charts license and wire in a datafeed adapter (our existing price feed). Until then, colored MAs would live on our ownlightweight-chartschart.
Issues and PRs welcome! Before contributing UI, read AGENTS.md โ it defines the bar (tokens-only, tabular numerics, custom components, designed error states). Code conventions: TypeScript strict (no any), functional components, money stored as integer cents, dates as ISO-8601 UTC.
MIT. Use, modify, and distribute freely. ยฉ 2026 Thomas Maximini.