aasx-viewer

Universal, cross-framework visual viewer component for Asset Administration Shell (.aasx) packages and EU Digital Product Passports (DPP).
Built as standard Custom Elements (Web Components v1 + Shadow DOM) with dedicated adapters for Angular 21/22, Angular 18-20, React 19, React 18/17, and vanilla HTML/JS. Zero external dependencies.

Features

• Cross-Framework Native: One single component that runs natively in Angular, React, Vue, Svelte, or plain HTML.
• Shadow DOM Encapsulation: Zero style bleed; completely immune to host CSS overrides (Tailwind, Bootstrap, Angular Material).
• Themeable: Dark & Light modes with instant CSS token customization (--aasx-accent, --aasx-bg, --aasx-fg, --aasx-border).
• Comprehensive IDTA Coverage:
  • 🏷️ Digital Nameplate (IDTA 01001 / IDTA 02006)
  • ⚙️ Technical Data & Physical Units (IDTA 02005)
  • 📄 Handover Documentation (IDTA 02004 / VDI 2770)
  • 🌳 Submodel Hierarchy Tree with accessible keyboard navigation
  • 🌱 EU Digital Product Passport & Carbon Footprint (IDTA 02003)
• Zero Heavy Runtime: 0 Lit, 0 Stencil, 0 polyfills (< 12 kB unpacked, ~3.5 kB gzipped).

Installation

# npm
npm install aasx-viewer aasx-viewmodel

# yarn
yarn add aasx-viewer aasx-viewmodel

# pnpm
pnpm add aasx-viewer aasx-viewmodel

Usage Guide

1. Angular (Angular 21 & 22, Angular 18–20)

Supports modern Angular standalone components, Angular Signals (input() / output()), and zoneless change detection:

import { Component, signal } from '@angular/core';
import { AasxViewerComponent } from 'aasx-viewer/angular';
import 'aasx-viewer/styles.css';
import type { DigitalTwinViewModel } from 'aasx-viewmodel';

@Component({
  selector: 'app-digital-twin-page',
  standalone: true,
  imports: [AasxViewerComponent],
  template: `
    <div class="twin-container">
      <h2>Asset Digital Twin</h2>
      <aasx-viewer-ng
        [model]="viewModel()"
        theme="dark"
        sections="identification nameplate technical documentation hierarchy passport"
        (nodeSelect)="onPropertySelect($event)">
      </aasx-viewer-ng>
    </div>
  `
})
export class DigitalTwinPageComponent {
  readonly viewModel = signal<DigitalTwinViewModel | null>(null);

  onPropertySelect(event: { id: string }) {
    console.log('Selected property or node:', event.id);
  }
}

Note: You can also use <aasx-viewer> directly in any Angular template by adding schemas: [CUSTOM_ELEMENTS_SCHEMA] to your @Component.

2. React (React 19, 18, 17 & Next.js App Router)

Compatible with React Server Components ('use client' included) and earlier versions:

'use client';
import React, { useState } from 'react';
import { AasxViewer } from 'aasx-viewer/react';
import 'aasx-viewer/styles.css';
import type { DigitalTwinViewModel } from 'aasx-viewmodel';

export function ProductPassportView({ vm }: { vm: DigitalTwinViewModel }) {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  return (
    <div style={{ maxWidth: '960px', margin: '0 auto' }}>
      <AasxViewer
        model={vm}
        theme="dark"
        sections="identification nameplate technical documentation hierarchy passport"
        onNodeSelect={(detail) => setSelectedId(detail.id)}
      />
      {selectedId && <p>Clicked element: {selectedId}</p>}
    </div>
  );
}

3. Plain HTML / Vanilla JS (Zero Build Step)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aasx-viewer/styles.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/aasx-viewer/src/index.js"></script>
</head>
<body style="background: #0b1120; padding: 2rem;">

  <!-- Directly via URL -->
  <aasx-viewer src="/api/passports/servo-motor.json" theme="dark"></aasx-viewer>

  <!-- Or bind programmatic ViewModel -->
  <aasx-viewer id="my-viewer" theme="dark"></aasx-viewer>

  <script type="module">
    import { toViewModel } from 'https://cdn.jsdelivr.net/npm/aasx-viewmodel';

    const viewer = document.getElementById('my-viewer');
    viewer.model = myAasViewModel;

    viewer.addEventListener('aasx-select', (e) => {
      console.log('User selected:', e.detail.id);
    });
  </script>
</body>
</html>

Custom Theming

Customize the look and feel using standard CSS Custom Properties:

aasx-viewer {
  --aasx-accent: #0284c7;     /* Primary brand color */
  --aasx-bg: #ffffff;         /* Background color */
  --aasx-fg: #0f172a;         /* Text color */
  --aasx-muted: #64748b;      /* Subtitles & metadata */
  --aasx-border: #e2e8f0;     /* Border lines */
  --aasx-radius: 12px;        /* Corner radius */
}

License

MIT OR Apache-2.0 © 2026 Adarrsh. See THIRD_PARTY_NOTICES.md for attributions.