Getting Started

Getting Started

Certificate Gadgets can be used as a local browser app, a reusable npm package, or an embeddable Webview-friendly UI.

Install from npm

npm install @pkistudio/certgadgets

The package exports:

• @pkistudio/certgadgets: UI-independent Core API.
• @pkistudio/certgadgets/core: Core API alias.
• @pkistudio/certgadgets/validation: network-assisted validation helper API.
• @pkistudio/certgadgets/app: browser application initializer.
• @pkistudio/certgadgets/styles.css: application stylesheet.

Run Locally from the Repository

npm install
npm run dev

Then open the Vite local URL, normally:

http://localhost:5173/

In VS Code, the Start certgadgets server task starts the same development server on port 5173.

Load a Certificate

Use the Load menu in the left pane. Supported inputs include:

• DER certificate files.
• PEM files with a -----BEGIN CERTIFICATE----- block.
• Clipboard PEM.
• Clipboard HEX.

The repository includes debug fixtures for manual browser checks:

fixtures/debug-certificate.pem
fixtures/debug-certificate.der

Open the app, choose Load -> from File, and select either fixture.

Inspect Certificate Details

After a certificate is loaded, the left tree shows the certificate and child items for TBSCertificate fields, extensions, certificate signature algorithm, and signature value.

Selecting a tree item updates the detail pane. When DER is available for the selected item, the embedded PkiStudioJS viewer displays that ASN.1 object.

Common extension types such as Basic Constraints, Key Usage, Extended Key Usage, Subject Alternative Name, Authority Information Access, CRL Distribution Points, Subject Key Identifier, and Authority Key Identifier are named and summarized when possible.

Run Explicit Network Validation

Certificate Gadgets detects network resources from certificate extensions and offers explicit actions for targets such as:

• OCSP responder URLs.
• AIA CA Issuers certificate URLs.
• CRL Distribution Point URLs.
• Other HTTP or HTTPS extension resources.

The app asks for network access confirmation before each request. Browser apps that embed the package should provide host-owned confirmNetworkAccess and fetchNetworkResource callbacks when they want reliable validation behavior.

Local development includes a Vite-only fetch proxy for certificate validation requests that would otherwise be blocked by browser CORS rules.

Save Certificate Data

Use the Save menu to write the selected DER-backed tree item as DER, or to write the loaded certificate as PEM.

The app uses the browser's native save-file picker when available and falls back to browser downloads when it is not.

Use the APIs Directly

Use the UI-independent Core API:

import { CertGadgetsCore } from '@pkistudio/certgadgets';

const bytes = new Uint8Array(await file.arrayBuffer());
const certificate = CertGadgetsCore.createCertificateFromBytes(bytes, file.name);
const plans = CertGadgetsCore.collectNetworkValidationPlans(certificate);

console.log(certificate.label, plans.length);

Use the validation helpers when a host owns confirmation, networking, and result display. See Validation API for a complete example.