Embedded UI

Membrane provides pre-built UI components you can embed directly in your product — connection flows, integration catalogs, data builders, and more. Available as React components or framework-agnostic embedded screens.

React SDK

Install

npm install @membranehq/react

Setup

Wrap your app with the Membrane provider:

import { MembraneClientProvider } from '@membranehq/react'

function App() {
  return (
    <MembraneClientProvider
      fetchToken={async () => {
        const response = await fetch('/api/membrane-token')
        const { token } = await response.json()
        return token
      }}
    >
      <YourApp />
    </MembraneClientProvider>
  )
}

Hooks

Use hooks to fetch and manage Membrane resources:

import { useIntegrations, useConnections, useAction } from '@membranehq/react'

function IntegrationsPage() {
  const { items: integrations } = useIntegrations()
  const { items: connections } = useConnections()

  return (
    <div>
      {integrations?.map((integration) => (
        <div key={integration.id}>{integration.name}</div>
      ))}
    </div>
  )
}

Available Hooks

Hook	Description
`useIntegrations` / `useIntegration`	List or get integrations
`useConnections` / `useConnection`	List or get connections
`useActions` / `useAction`	List or get actions
`useFlows` / `useFlow`	List or get flows
`useFlowInstances` / `useFlowInstance`	List or get flow instances
`useDataSources` / `useDataSource`	List or get data sources
`useFieldMappings` / `useFieldMapping`	List or get field mappings
`useDataLinkTables` / `useDataLinkTable`	List or get data link tables
`useAppEventTypes` / `useAppEventSubscription`	Manage app events
`useAppDataSchemas` / `useAppDataSchemaInstance`	Manage app data schemas
`useCustomers` / `useCustomer`	List or get customers
`useScreen`	Access UI screens
`useConnectorSpec`	Get connector specification
`useDataCollectionSpec`	Get data collection specification

UI Components

Pre-built components for common integration UIs:

import { Integrations, DataBuilder } from '@membranehq/react'

// Render a full integrations list
<Integrations />

// Render a data builder for configuring field mappings
<DataBuilder />

Embedded Screens

For non-React apps or more complex scenarios, use Membrane's embedded screens via iframes:

import { MembraneClient } from '@membranehq/sdk'

const membrane = new MembraneClient({ token: '...' })

// Get an embed URL for an iframe
const embedUri = membrane.getEmbedUri('integration-catalog')

Connection UI

Membrane provides a pre-built Connection UI for connecting tenants to external apps. See the sub-pages for customization options.

Full Reference

See the React SDK for hooks, components, and detailed reference. Also available: Vue.js SDK and CSP Rules.