A modern and visually appealing web interface for hledger built with React and Tailwind CSS. It provides a comprehensive dashboard and detailed views for managing personal finances via the hledger API.
hledger-web connects directly to a local hledger API instance to visualize financial data. The application features an interactive dashboard with net worth trends and spending categories, a hierarchical account tree with collapsible sections, and a full transaction register with advanced filtering. Every view respects a global date range filter that includes common presets and custom date selection. The interface supports both dark and light modes, automatically detecting system preferences while allowing for manual overrides.
The frontend is built on React 19 and Vite for a fast development experience and optimized production builds. Styling is handled by Tailwind CSS 4, providing a clean and minimal aesthetic. Server state management and caching are powered by TanStack Query, while all API interactions are fully type-safe through a client generated from the OpenAPI specification using openapi-fetch. Charts are rendered with Recharts, and date manipulations utilize date-fns. Testing is conducted with Vitest and React Testing Library.
Before starting the development server, ensure hledger is installed and the API server is running on port 8080 (e.g., hledger-api --server --port 8080).
- Install the project dependencies by running
npm install. - Generate the TypeScript types from your local API instance with
npm run generate-types. - Launch the application using
npm run dev. The dashboard will be available athttp://localhost:5173.
| Command | Action |
|---|---|
| npm run dev | Starts the local development server |
| npm run build | Compiles the application for production |
| npm run preview | Previews the production build locally |
| npm run openapi:download | Fetches the OpenAPI schema from a locally running hledger-api server |
| npm run openapi:generate | Generate Typescript definitions based on OpenAPI schema |
| npm run lint | Runs code quality checks with ESLint |
| npm test | Executes the test suite with Vitest |
src/
├── api/ # Generated types and TanStack Query hooks
├── components/ # Shared UI (Sidebar, TopBar, Charts, StatCard)
├── context/ # DateRangeContext for global filtering
├── lib/ # Formatting utilities and date presets
├── pages/ # View components for Dashboard, Accounts, etc.
└── App.tsx # Main router and layout shell
This project is private and intended for personal use.