Skip to content
Space Invoices Documentation

Embed SDK

The @spaceinvoices/embed-sdk package lets you embed pre-built Space Invoices UI into your application using iframes. It’s the fastest way to add invoicing functionality without building UI from scratch.

Features

  • Pre-built UI — Invoice lists, forms, and customer management
  • Customizable Themes — Match your brand colors
  • Event System — React to user actions
  • Framework Agnostic — Works with React, Vue, vanilla JS, and more
  • Entity-scoped — Uses entity API keys scoped to a single business

Choose This Path If

  • you want working invoicing UI in hours, not days
  • you do not want to build invoice list, form, and settings screens yourself
  • you can accept iframe boundaries in exchange for speed
  • you want a simple tenant-facing experience per entity

Tradeoff

You give up some UI ownership compared with React UI or a custom frontend. If you need full component-level control, use React UI or the JavaScript SDK.

Quick Example

import { SpaceInvoices } from '@spaceinvoices/embed-sdk';


const si = new SpaceInvoices({
  apiKey: 'ek_sandbox_your_entity_api_key',
  entityId: 'ent_123',
  theme: {
    primary: '#6366f1',
    radius: 8,
  },
  onAction: (action) => {
    console.log('Action:', action);
  },
});


// Open invoice list in a container
si.open('invoices', { container: '#invoice-container' });

When to Use

Use the Embed SDK when you:

  • Want pre-built UI without building components
  • Need quick integration (hours, not days)
  • Want consistent, maintained UI
  • Are building a white-label solution for your customers

Use it only when entity-level access is an acceptable trust boundary for that embedded flow.

Next Steps

  1. Quick Start — open your first embedded view
  2. Configuration — choose keys, options, and auth flow
  3. Views — map the UI to your product surface
  4. Events — respond to user actions and navigation
  5. User Access — decide how end users should enter the dashboard