Embedded UI overview

Paprel Embedded UI is the production-ready, framework-neutral component layer for putting Paprel accounting inside your product. It uses the same ledger, App Connect permissions, OpenAPI contracts, and audit controls as a headless integration.

Use the complete Web Components when you want Paprel-owned accounting workflows inside your shell. Use the typed resources in @paprel/embed-accounting when your product needs a completely custom UX. Both are supported integration paths and can be mixed screen by screen.

UI scope: Embedded UI stops at accounting and financial reports. Expenses, invoices, bills, and credit notes remain API-first surfaces. Future embedded domains will follow the same package pattern when released.

When to use which surface

Approach	Best for
Typed resources / REST	Custom UX, your design system, automation, and batch jobs
Embed Web Components	Production operator workflows inside your application shell
MCP	AI agents (ChatGPT, Claude, Cursor) calling tools against the same books

Packages

Package	Role
`@paprel/embed-core`	Shared HTTP client, App Connect token lifecycle, errors, and host-event types
`@paprel/embed-ui`	Shared semantic theme contract; included by domain packages
`@paprel/embed-accounting`	Typed accounting resources and Web Components for accounts, journals, banking, transactions, and reconciliation
`@paprel/embed-reports`	Trial balance, balance sheet, P&L, cash flow, and general-ledger components

Install @paprel/embed-core with the domain packages you need. Domain packages own their typed resources and UI; @paprel/embed-ui is installed transitively unless you want to import its theme contract directly.

Web Components — any framework

@paprel/embed-accounting registers standard custom elements in the browser. Any stack that renders HTML can mount them — no framework-specific adapter package:

Stack	Integration
React	Render tags in JSX; pass attributes as props; wire events with `ref` + `addEventListener`
Vue	Use kebab-case tags and add shared host-event listeners on a shell `ref`; no Pinia or plugin required
Angular	Add `CUSTOM_ELEMENTS_SCHEMA` and use tags in templates
Server-rendered HTML	Drop tags in your markup after one client-side `configureAccounting` boot

Call configureAccounting once at app startup, import the domain packages to register their elements, then use declarative tags anywhere in your DOM. The former configureEmbedAccounting name remains only as a deprecated beta compatibility alias. See Get started for install and mount steps.

Styling

The main domain imports include component styles. No separate CSS or @paprel/embed-ui import is required.

The defaults follow the Paprel workspace look. Override inherited semantic tokens to match your product without reaching through component shadow roots.

Components read CSS custom properties on a wrapper (.paprel-shell). No shadow-DOM piercing required:

/* Paprel / Newledger default (Warm White) */
.paprel-shell {
  --paprel-color-primary: #1c1c18;
  --paprel-color-primary-text: #ffffff;
  --paprel-color-primary-hover: #2c2c27;
  --paprel-color-text: #1c1c18;
  --paprel-color-muted: #78786f;
  --paprel-color-border: #e8e8e2;
  --paprel-color-border-subtle: #f0f0eb;
  --paprel-color-surface: #ffffff;
  --paprel-color-surface-muted: #f7f7f4;
  --paprel-color-success: #059669;
  --paprel-color-danger: #dc2626;
  --paprel-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --paprel-font-size: 14px;
  --paprel-radius: 14px;
  --paprel-radius-sm: 10px;
}

<div class="paprel-shell">
  <paprel-journal-list page="1"></paprel-journal-list>
</div>

Full token list, master–detail wiring, and permissions: Embedding patterns.

Architecture: secrets stay on your server

The browser never holds App Connect client_secret. Your backend-for-frontend (BFF) — a thin route on your own API — exchanges credentials for a short-lived access token and returns only the token (and optional permissions[]) to the embed SDK:

Trust boundary: the browser receives only a short-lived access token. App Connect credentials never leave the partner backend.

For token exchange details, see Build the embed token backend (BFF). For scope design, see OAuth scopes and permissions.

Component scope

Accounting only — complete for Web Components. Integrate expense and documents via API unless Paprel ships a partner-specific UI package on request.

COA + journals

Element	Purpose
`paprel-chart-of-accounts`	Flat/tree COA, balances, archived toggle
`paprel-account-select`	Searchable grouped account picker
`paprel-account-form`	Create/edit account
`paprel-journal-list`	Paginated journal table + filters
`paprel-journal-detail`	View, void, copy, reverse
`paprel-journal-editor`	Create / edit / post manual journal

Reports, banking, transactions, reconciliation

Element	Purpose
`paprel-trial-balance`, `paprel-balance-sheet`, `paprel-income-statement`, `paprel-cash-flow`, `paprel-general-ledger`	Financial reports from `@paprel/embed-reports`
`paprel-banking-list`, `paprel-bank-account-detail`	Banking accounts
`paprel-transaction-inbox`, `paprel-transaction-detail`, `paprel-transaction-match-sheet`	Bank transactions + match
`paprel-reconciliation-list`, `paprel-reconciliation-form`, `paprel-reconciliation-detail`	Reconciliation workspace

Where to go next

Get started — install, configure, mount your first component
Build the embed token backend (BFF) — partner server route (~40 lines)
Patterns — master–detail wiring, theming, permissions
Host events — connect routing, URL state, toasts, and analytics
Sample app — public framework-neutral reference application
Financial reports — install and mount the reports package
Build embedded accounting in 20 minutes (API) — start here for production — prove the ledger loop with curl
Embedded accounting product overview — platform fit, MCP, evaluation checklist
What is Paprel? — product background for operators new to the platform