Quickstart

This gets a working import flow onto your page. You need access to the published packages and a self-hosted (or pilot) engine endpoint with a signed license key.

Access

Packages publish to GitHub Packages (npm.pkg.github.com, scope @capitality-io, restricted). A plain npm install against the public registry will not work — access comes with a pilot or license. Write to [email protected].

1. Install the package

npm install @capitality-io/import-suite-ng

2. Define the custom element

main.ts

import { defineImportSuiteElement } from '@capitality-io/import-suite-ng';

// Framework-agnostic — registers <mildport-import> once, for the whole app.
await defineImportSuiteElement('mildport-import');

3. Drop it in and point it at your engine

<mildport-import
  api-base-url="https://imports.your-infra.example"
  license-key="SIGNED_TENANT_KEY"
></mildport-import>

wire-it-up.ts

const el = document.querySelector('mildport-import')!;

// The target data model — what a clean row looks like in your product.
el.columnSchema = yourTargetSchema;

// Receive clean rows in the browser…
el.addEventListener('import-applied', e => sync(e.detail));
// …or, in production, take a signed apply webhook on your backend instead.

That’s the whole integration surface: attributes in, DOM events out. No SDK lock-in, no iframe.

Next

• Configure the widget — columnSchema, attributes, apply modes.
• Events & apply — the lifecycle events and how rows reach your app.
• Theming — match the widget to your design system.