Skip to main content

Getting Started

Skillspilot Web Components is a library of production-ready web components for the Skillspilot/TRM-AI platform. Components are distributed via GitHub Releases and work in any web application without framework lock-in.

Installation​

Install directly from a GitHub Release tarball:

npm install https://github.com/StephanWald/trm-ai-webcomponents/releases/download/v0.0.1/skillspilot-webcomponents-0.0.1.tgz

Replace 0.0.1 with the version you want. Check the Releases page for all available versions.

ES module import (lazy-loading, recommended):

import { defineCustomElements } from '@skillspilot/webcomponents/loader';

// Auto-registers all sp-* components when they are first used
defineCustomElements();

Direct component import (bundle specific components):

import '@skillspilot/webcomponents/dist/components';

Script Tag​

Add this script tag to your HTML <head>. It auto-registers all components immediately:

<script
  type="module"
  src="https://stephanwald.github.io/trm-ai-webcomponents/wc/skillspilot.esm.js"
></script>

No import or defineCustomElements call is needed — the script auto-registers all sp-* elements.

Quick Start​

Once installed (or the script tag is included), use components directly in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <script
    type="module"
    src="https://stephanwald.github.io/trm-ai-webcomponents/wc/skillspilot.esm.js"
  ></script>
</head>
<body>
  <sp-org-chart></sp-org-chart>

  <script>
    const chart = document.querySelector('sp-org-chart');
    chart.nodes = [
      { id: '1', label: 'CEO', name: 'Alice Johnson' },
      { id: '2', label: 'CTO', name: 'Bob Smith', parentId: '1' },
      { id: '3', label: 'CFO', name: 'Carol White', parentId: '1' },
    ];
  </script>
</body>
</html>

Peer Dependencies​

sp-markdown-editor uses several optional peer dependencies for full functionality. They are optional — the editor loads gracefully without them, but certain features will be disabled:

PackageFeatureRequired For
markedMarkdown parsingPreview mode, WYSIWYG mode
dompurifyHTML sanitizationSafe preview rendering
prismjsSyntax highlightingCode block highlighting
turndownHTML to MarkdownPaste from clipboard, WYSIWYG to source

Install all peer dependencies at once:

npm install marked dompurify prismjs turndown

The other components (sp-org-chart, sp-walkthrough) have no peer dependencies.

Browser Support​

All components use the Web Components standard (Custom Elements v1, Shadow DOM v1). Supported in:

  • Chrome 67+
  • Firefox 63+
  • Safari 10.1+
  • Edge 79+ (Chromium-based)

Next Steps​