Getting Started

Embedded Components

Setting up Open Ledger’s prebuilt React UI components.

Open Ledger supports various integrations. Choose what suits you best:

Fastest implementation with pre-built UI components.

1

Installation

Install the Open Ledger React library using your preferred package manager:

$npm install @openledger/accounting-react

The package includes all necessary dependencies, including the API client for server communication.

2

Configuration

Create an API credentials object with your Open Ledger account details:

credentials.ts
1export const openLedgerConfig = {
2  entityId: "your-entity-id", // Your entity's identifier
3  accessToken: {
4    access_token: "your-access-token", // Token from /v1/entities/auth/generate-token endpoint
5    token_type: "Bearer",
6    expires_in: 3600,
7    expires_at: new Date(Date.now() + 3600 * 1000)
8  },
9  environment: "development", // Switch to "production" for live data
10  apiUrl: "https://api.openledger.com" // API endpoint
11};

Store your access token securely! For production, use environment variables or a secure vault service rather than hardcoding credentials.

You can obtain your access token by making a request to the /v1/entities/auth/generate-token endpoint. For more details, see the Authentication documentation.

3

Provider Setup

Wrap your application (or relevant sections) with the OpenLedgerProvider to provide authentication and context:

App.tsx
1import React from 'react';
2import { OpenLedgerProvider } from "@openledger/accounting-react";
3import { openLedgerConfig } from './credentials';
4
5function App() {
6  return (
7    <OpenLedgerProvider
8      entityId={openLedgerConfig.entityId}
9      accessToken={openLedgerConfig.accessToken}
10      environment={openLedgerConfig.environment}
11      apiUrl={openLedgerConfig.apiUrl}
12      theme={{
13        primary: { hex: "#511320" }, // Your theme color
14        accent: { hex: "#511320" }, // Your accent color
15        background: { hex: "#FFFFFF" }, // Background color
16        text: { hex: "#511320" }, // Text color
17        secondary: { hex: "#7D4955" }, // Secondary color
18        negative: { hex: "#B22222" }, // Negative color
19      }}
20    >
21      <YourApplication />
22    </OpenLedgerProvider>
23  );
24}
25
26export default App;
4

Adding Views

Add Open Ledger components to your application. You can use the all-in-one view or individual components:

FinanceDashboard.tsx
1import React from 'react';
2import { OpenLedgerView } from "@openledger/accounting-react";
3
4function FinanceDashboard() {
5  return (
6    <div className="dashboard-container">
7      <h1>Financial Dashboard</h1>
8      <OpenLedgerView />
9    </div>
10  );
11}
12
13export default FinanceDashboard;

The OpenLedgerView provides a complete financial dashboard with different sections.

  • OpenLedgerView: All-in-one financial dashboard
  • DashboardView: Summary with key metrics and charts
  • TransactionsView: Transaction management interface
  • ReportView: Financial reports generator
  • LedgerView: General ledger and chart of accounts
  • ChatView: AI financial assistant
  • SettingsView: Configuration interface