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), loadInput(input), and loadBundle(bundle, entryIdOrTypeName?) on the returned app instance.

Loading Definition Bundles

Definition Bundles let a host load schema data, named entries, sample or default Instance JSON, and optional UI Profile metadata through one app-facing object.

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

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

const rawAsn1Bundle: DefinitionBundle = {
  id: 'pkistudio.example.person',
  version: '1.0.0',
  label: 'Person Example',
  schema: {
    format: 'asn1',
    sourceName: 'person.asn1',
    source: `Example DEFINITIONS ::= BEGIN

Person ::= SEQUENCE {
  name UTF8String,
  age INTEGER OPTIONAL,
  email IA5String OPTIONAL
}

END`
  },
  entries: [{
    id: 'person',
    typeName: 'Person',
    sampleInput: { name: 'Alice', age: 42, email: 'alice@example.test' }
  }]
};

app.loadBundle(rawAsn1Bundle, 'person');

Bundles can also carry a parsed Schema Model instead of raw ASN.1 text:

const schemaModelBundle: DefinitionBundle = {
  id: 'pkistudio.example.person.schema-model',
  version: '1.0.0',
  label: 'Person Schema Model Example',
  schema: {
    format: 'schema-model',
    schema: {
      name: 'Example',
      tagDefault: 'explicit',
      types: [{
        name: 'Person',
        type: {
          kind: 'sequence',
          fields: [{ name: 'name', type: { kind: 'utf8String' } }]
        }
      }]
    }
  },
  entries: [{
    typeName: 'Person',
    defaultInput: { name: 'Alice' },
    uiProfile: {
      id: 'person-profile',
      typeName: 'Person',
      fields: { name: { label: 'Full name', placeholder: 'Alice' } }
    }
  }]
};

app.loadBundle(schemaModelBundle);

UI Profiles only describe the input experience. Schema diagnostics, instance diagnostics, and DER generation continue to use the Schema Model and Instance JSON as the source of truth.

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.
• loadBundle(bundle, entryIdOrTypeName?): load a Definition Bundle, optionally selecting an entry by entry id or type name.
• 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.