Ops Console SDK

Embed Hyphen's operational surfaces directly into your internal tools. The SDK provides drop-in Web Components that connect your operations team to the workflow engine — without building custom UI.

What It Does

The SDK gives your team four components:

Component	Purpose
`<hyphen-task-sidebar>`	Pending approval tasks from your workflows
`<hyphen-data-grid>`	Sortable, paginated data tables with inline editing
`<hyphen-doc-feed>`	Document upload surface that triggers workflow runs
`<hyphen-auth-modal>`	OTP-based login for per-user audit trails

Each component renders inside Shadow DOM — fully isolated from your host page's styles and scripts. No framework dependency. No build step required.

Why Embed

Ship an ops console in one sprint, not one quarter. Instead of building approval UIs, data tables, and upload forms from scratch, drop in the SDK and connect it to your Hyphen workflows.

User-level audit trails. Every action taken through an SDK component — approving a task, editing a row, uploading a document — is logged with the authenticated user's identity.

Real-time updates. Components subscribe to server-sent events. When a workflow status changes or a new task arrives, the UI updates automatically.

Works everywhere. Web Components run in any modern browser. Embed them in React, Vue, Angular, plain HTML, or any internal tool that renders a web view.

Architecture

text

Your Internal Tool
    |
    v
[SDK Components]  ──>  [Hyphen Gateway]  ──>  [Workflow Engine]
    ^                      |
    |                      v
[Publishable Key]     [Org Resolution]

The SDK authenticates with a publishable key (pk_live_*). The gateway resolves the key to an organisation, enforces origin restrictions and scope limits, and proxies requests to the engine. The SDK never sends X-Org-Id directly — organisation context is resolved server-side.

Quick Start

Three steps to a working ops console:

1. Add the script tag

html

<script src="https://cdn.tryhyphen.com/sdk/v1.js"></script>

2. Initialize with your publishable key

html

<script>
  const sdk = await HyphenSDK.init({
    publishableKey: 'pk_live_your_key_here'
  });
</script>

3. Drop in a component

html

<hyphen-task-sidebar auto-refresh></hyphen-task-sidebar>

That's it. The sidebar renders pending tasks from your workflows and lets your team approve or reject them inline.

Full setup guide: SDK Quickstart walks through getting a publishable key, initializing the SDK, and embedding all four components — in under 10 minutes.

---

Sections

Page	What You'll Learn
Quickstart	Get a publishable key, initialize the SDK, embed your first component
Components	All four components — attributes, events, and usage examples
Authentication	Anonymous vs. authenticated sessions, OTP flow, session lifecycle
Theming	CSS custom properties for matching your brand
Events & Real-Time	SDK event system, server-sent events, and cross-component updates

Browser Support

Browser	Minimum Version
Chrome	80+
Firefox	78+
Safari	14+
Edge	80+

The SDK targets ES2020 and uses Web Components (Custom Elements v1, Shadow DOM). No polyfills required for modern browsers.

Bundle Size

Format	Size	Gzipped
ES Module	58 kB	13 kB
UMD	42 kB	11 kB

Zero runtime dependencies. The entire SDK is a single file.