Embedding

Embedding

The browser application is exported from @pkistudio/asn1instancebuilder/app as initAsn1InstanceBuilder.

import { initAsn1InstanceBuilder } from '@pkistudio/asn1instancebuilder/app';
import '@pkistudio/asn1instancebuilder/styles.css';

const app = initAsn1InstanceBuilder({
  mount: '#app'
});

await app.build(false);

Mount Target

mount can be a selector or host element. The application fills the available browser viewport and manages its own Definition pane, Instance Input pane, Diagnostics pane, splitters, API Log, and viewer-window routing.

Initial Schema and Input

Pass an initial Schema Model and instance input when the host already owns the data:

import { initAsn1InstanceBuilder, type Asn1InstanceBuilderAppOptions } from '@pkistudio/asn1instancebuilder/app';

const options: Asn1InstanceBuilderAppOptions = {
  mount: '#app',
  schema,
  input
};

const app = initAsn1InstanceBuilder(options);

Hosts can also call loadSchema(schema) and loadInput(input) on the returned app instance.

App Instance

The returned app instance exposes:

• build(openViewerWindow?): parse, validate, and build DER from the current UI state. Pass false to suppress opening a standalone viewer window.
• loadSchema(schema): load a Schema Model into the app.
• loadInput(input): load instance input into the app.

Host Boundaries

Host-specific behavior should remain outside the reusable package.

That includes:

• VS Code-specific file access.
• Native dialogs.
• Host persistence.
• Webview lifecycle.
• Policy decisions around where generated DER should be stored or opened.

The browser app currently owns browser file input, clipboard reads, simple definition downloads, local layout persistence, and standalone viewer tab opening for the default web experience.

PkiStudioJS Integration

The app imports PkiStudioJS from the published @pkistudio/pkistudiojs package:

• @pkistudio/pkistudiojs/core.
• @pkistudio/pkistudiojs/oid-resolver.
• @pkistudio/pkistudiojs/viewer.

Generated DER is routed to viewer.html through local storage and displayed in a full PkiStudioJS viewer tab. Hosts that need a different viewer lifecycle can use the Core API directly and own the viewer bridge outside this package.