OpenLedger Developer Platform

Open Ledger Quickstart

Everything you need to start integrating embedded accounting features into your application

Installation

Install the OpenLedger SDK for your framework of choice:

1
npm install @openledger/accounting-react

Also install Tailwind CSS for styling components:

1
npm install -D tailwindcss postcss autoprefixer

Quick Integration

1. Set up your provider/client

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { OpenLedgerProvider } from "@openledger/accounting-react";

function App() {
  return (
    <OpenLedgerProvider
      companyId="cm8jss2yn000112u83v8sa6mk"
      enterpriseId="cm8jss2v6000012u82knbymxx"
      enterpriseSecret="4ad14ae4f4fc487693287e0edc51c661"
      apiUrl="https://api-dev.openledger.com"
      environment="development"
      theme={{
        primary: { hex: "#511320" }, // CRANBERRY
        accent: { hex: "#511320" }, // CRANBERRY
        background: { hex: "#FFFFFF" }, // WHITE
        text: { hex: "#511320" }, // CRANBERRY for text
        secondary: { hex: "#7D4955" }, // Lighter CRANBERRY shade
        negative: { hex: "#B22222" }, // A red that works with this palette
      }}
    >
      {/* Your app components */}
    </OpenLedgerProvider>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// app.module.ts
import { OpenLedgerModule } from '@openledger/accounting-angular';

@NgModule({
  imports: [
    OpenLedgerModule.forRoot({
      companyId="cm8jss2yn000112u83v8sa6mk"
      enterpriseId="cm8jss2v6000012u82knbymxx"
      enterpriseSecret="4ad14ae4f4fc487693287e0edc51c661"
      apiUrl="https://api-dev.openledger.com"
    })
  ]
})
export class AppModule { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { OpenLedgerPlugin } from '@openledger/accounting-vue'

const app = createApp(App)

app.use(OpenLedgerPlugin, {
      companyId="cm8jss2yn000112u83v8sa6mk"
      enterpriseId="cm8jss2v6000012u82knbymxx"
      enterpriseSecret="4ad14ae4f4fc487693287e0edc51c661"
      apiUrl="https://api-dev.openledger.com"
      environment="development"
})

app.mount('#app')

1
2
3
4
5
6
7
8
// Initialize the client
const openLedger = new OpenLedger({
      companyId="cm8jss2yn000112u83v8sa6mk"
      enterpriseId="cm8jss2v6000012u82knbymxx"
      enterpriseSecret="4ad14ae4f4fc487693287e0edc51c661"
      apiUrl="https://api-dev.openledger.com"
      environment="development"
});

2. Add components to your app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { 
  OpenLedgerView, 
  TransactionTable, 
  DashboardBox 
} from "@openledger/accounting-react";

function MyComponent() {
  return (
    <div>
      {/* Full accounting dashboard */}
      <OpenLedgerView />
      
      {/* Or use individual components */}
      <TransactionTable />
      <DashboardBox>
        {/* Custom content */}
      </DashboardBox>
    </div>
  );
}

1
2
3
4
5
6
7
8
<!-- Component template -->
<open-ledger-view></open-ledger-view>

<!-- Individual components -->
<transaction-table></transaction-table>
<dashboard-box>
  <!-- Custom content -->
</dashboard-box>

1
2
3
4
5
6
7
8
9
10
11
12
13
// Get transactions
openLedger.getTransactions()
  .then(transactions => {
    console.log(transactions);
    // Render transactions in your UI
  });

// Get accounts
openLedger.getAccounts()
  .then(accounts => {
    console.log(accounts);
    // Use account data in your app
  });

3. Access data with hooks/methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { 
  useOpenLedgerContext,
  useTransactionContext,
  useAccountContext
} from "@openledger/accounting-react";

function MyCustomComponent() {
  const { companyId, theme } = useOpenLedgerContext();
  const { transactions, isLoading } = useTransactionContext();
  const { accounts } = useAccountContext();

  // Use the data in your component
  return (
    <div>
      {isLoading ? (
        <p>Loading transactions...</p>
      ) : (
        <ul>
          {transactions.map(tx => (
            <li key={tx.id}>{tx.description}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component } from '@angular/core';
import { OpenLedgerService } from '@openledger/accounting-angular';

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngIf="isLoading; else content">
      Loading transactions...
    </div>
    <ng-template #content>
      <ul>
        <li *ngFor="let tx of transactions">
          {{tx.description}}
                </li>
      </ul>
    </ng-template>
  `
})
export class MyComponent {
  transactions = [];
  isLoading = true;

  constructor(private openLedger: OpenLedgerService) {
    this.openLedger.getTransactions().subscribe(data => {
      this.transactions = data;
      this.isLoading = false;
    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
export default {
  data() {
    return {
      transactions: [],
      isLoading: true
    }
  },
  created() {
    this.$openLedger.getTransactions()
      .then(data => {
        this.transactions = data;
        this.isLoading = false;
      });
  }
}
</script>

<template>
  <div v-if="isLoading">
    Loading transactions...
  </div>
  <ul v-else>
    <li v-for="tx in transactions" :key="tx.id">
      {{ tx.description }}
                </li>
  </ul>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Get transaction data
openLedger.getTransactions({
  startDate: '2023-01-01',
  endDate: '2023-12-31',
  limit: 50
})
.then(transactions => {
  console.log(transactions);
  // Use transaction data
})
.catch(error => {
  console.error('Error fetching transactions:', error);
});

// Create a transaction
openLedger.createTransaction({
  date: '2023-04-15',
  description: 'Consulting services',
  amount: 1000,
  accountId: 'acct_12345'
})
.then(result => {
  console.log('Transaction created:', result);
})
.catch(error => {
  console.error('Error creating transaction:', error);
});

Using your API Keys

Your API keys are tied to your developer account. Current keys:Company ID: cm97t3pzd0015oymsbj40y3t1Enterprise ID (Developer ID): cm97t3pbg0014oyms16xi702rEnterprise Secret (API Key): 1083be70b90a4d8c959eedb5f7f74fd2For assistance with your API keys, contact api@openledger.com

Complete Example

Here's a complete React example showing how to set up the OpenLedger SDK and render the accounting dashboard:

index.tsx / main.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { OpenLedgerProvider } from "@openledger/accounting-react";
import App from "./App.tsx";
import "./index.css";
import "@openledger/accounting-react/dist/styles.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <OpenLedgerProvider
      companyId="cm8jss2yn000112u83v8sa6mk"
      enterpriseId="cm8jss2v6000012u82knbymxx"
      enterpriseSecret="4ad14ae4f4fc487693287e0edc51c661"
      apiUrl="https://api-dev.openledger.com"
      environment="development"
      theme={{
        primary: { hex: "#511320" }, // CRANBERRY
        accent: { hex: "#511320" }, // CRANBERRY
        background: { hex: "#FFFFFF" }, // WHITE
        text: { hex: "#511320" }, // CRANBERRY for text
        secondary: { hex: "#7D4955" }, // Lighter CRANBERRY shade
        negative: { hex: "#B22222" }, // A red that works with this palette
      }}
    >
      <App />
    </OpenLedgerProvider>
  </StrictMode>
);

App.tsx

1
2
3
4
5
6
7
8
9
10
11
import { OpenLedgerView } from "@openledger/accounting-react";

function App() {
  return (
    <div className="App">
      <OpenLedgerView />
    </div>
  );
}

export default App;

tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@openledger/accounting-react/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        cranberry: {
          DEFAULT: "#511320",
          50: "#F9E9EC",
          100: "#F3D3D9",
          200: "#E6A7B3",
          300: "#D97C8D",
          400: "#CC5067",
          500: "#BF2441",
          600: "#991D34",
          700: "#731627",
          800: "#4C0E1A",
          900: "#26070D",
          950: "#130407",
        },
      },
    },
  },
  plugins: [],
};

Interactive Demo

Experiment with the OpenLedger components in real-time. Edit the code below and see the changes rendered with Tailwind styling.

Code Editor

Note: In a production application, make sure to import the styles with:
import "@openledger/accounting-react/dist/styles.css";

Live Preview

Result

Try it on CodeSandbox

npm Package

@openledger/accounting-react

Latest version: 1.5.2

View on npm

npm install @openledger/accounting-react

Dependencies

React 17+, React DOM, Tailwind CSS

Bundle Size

85KB minified + gzipped

License

MIT

View complete documentation

API Reference

Explore the full API documentation and endpoints

Browse API docs

Code Examples

See real-world implementation examples

View examples

SDK Libraries

Download and explore our SDK libraries

Visit GitHub

Need help?

Need help?

Using your API Keys