Get started with Embedded UI

Install the domain packages you need, configure App Connect once, and mount production accounting workflows inside your application shell. You can use the Web Components, typed resources, or both.

This page tracks the published 0.1.0-beta package line. Read Overview first if you need the backend-for-frontend (BFF) auth model or package boundaries.

Prerequisites

A sandbox company with App Connect credentials
Scopes for the surfaces you mount (minimum for COA + journals v1):

accounting:account-list
accounting:journal-list
accounting:journal-add

A backend-for-frontend (BFF) route on your server that exchanges client_id + client_secret for an access token — see Build the embed token backend (BFF)

Install

npm install @paprel/embed-core @paprel/embed-accounting @paprel/embed-reports

Configure once at app boot

Call configureAccounting before mounting components. Every accounting and report widget reads auth and API base URL from this shared context:

import { configureAccounting } from "@paprel/embed-accounting";

configureAccounting({
  baseUrl: "https://api.paprel.com", // or "" when proxying /v1 on same origin
  locale: "en", // en | ko | es | ru
  auth: {
    partnerDomain: "app.yourproduct.com",
    async getTokens() {
      const res = await fetch("/api/embed-token", { credentials: "include" });
      if (!res.ok) throw new Error("Embed token failed");
      const { accessToken, expiresAt, permissions, companyId } = await res.json();
      return { accessToken, expiresAt, permissions, companyId };
    },
    onSessionExpired() {
      window.location.href = "/login";
    },
  },
});

// Register custom elements after configure
import "@paprel/embed-accounting";
import "@paprel/embed-reports";

The main imports register their custom elements and include component styles. No separate stylesheet or @paprel/embed-ui import is required.

Mount components

<paprel-chart-of-accounts></paprel-chart-of-accounts>

<paprel-journal-list page="1"></paprel-journal-list>
<paprel-journal-detail journal-id="…"></paprel-journal-detail>

<paprel-journal-editor currency="USD"></paprel-journal-editor>

<paprel-account-select label="Account"></paprel-account-select>

<paprel-trial-balance as-of-date="2026-08-25" currency="USD"></paprel-trial-balance>

No React provider tree required. Use the same tags in Vue (:journal-id), React (pass attributes as props on the custom element), or plain HTML.

Headless escape hatch

import { createAccountingClient } from "@paprel/embed-accounting";

const client = createAccountingClient({ baseUrl, auth });
const tree = await client.accounts.tree();
const journals = await client.journals.list({ page: 1 });

Same auth contract, no Web Components.

Next steps

Build the embed token backend (BFF) — implement /api/embed-token on your server
Post your first journal in 5 minutes — create App Connect credentials, configure the partner domain, and verify a token exchange
Authentication & tokens — understand App Connect versus API credentials and write authentication
Patterns — list → detail → editor wiring and theming
Host events — routing, URL state, success feedback, and analytics
Financial reports — report components and parameters
Component reference — per-element attributes and events
Sample app — runnable framework-neutral reference application
New to Paprel? Product introduction and account setup guide