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.

Try the Embed Playground to test embedded views with your Entity API Key and Entity ID.

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