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  developerId: "your-developer-id", // Your developer ID for authentication
4  developerSecret: "your-developer-secret", // Your developer secret
5  environment: "development", // Switch to "production" for live data
6  apiUrl: "https://api.openledger.com" // API endpoint
7};

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

To obtain your API credentials, please contact the Open Ledger team at https://www.openledger.com/contact.

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      developerId={openLedgerConfig.developerId}
10      developerSecret={openLedgerConfig.developerSecret}
11      environment={openLedgerConfig.environment}
12      apiUrl={openLedgerConfig.apiUrl}
13    >
14      <YourApplication />
15    </OpenLedgerProvider>
16  );
17}
18
19export 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