Web Component

@real-life-talent-tree/widget ships a self-contained <talent-tree> custom element. It uses Shadow DOM so its styles are isolated from the host page.

Installation

npm install @real-life-talent-tree/widget

Usage

Via npm (bundler / module)

import '@real-life-talent-tree/widget'

Then use the element in your HTML or template:

<talent-tree username="your-username" slug="your-tree-slug"></talent-tree>

TypeScript

Custom elements aren't included in React's JSX type definitions by default. Add a declaration file to your project so TypeScript recognises the element:

// types/talent-tree.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'talent-tree': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      username?: string
      slug?: string
    }
  }
}

Next.js / SSR

The widget is browser-only. Importing it at the module level will crash during server-side rendering. Use next/dynamic with ssr: false to load it only in the browser:

'use client'

import dynamic from 'next/dynamic'
import { useEffect, useRef } from 'react'

const TalentTreeEmbed = dynamic(
  () =>
    import('@real-life-talent-tree/widget').then(() => {
      return function TalentTreeEmbed({ username, slug }: { username: string; slug: string }) {
        return <talent-tree username={username} slug={slug} />
      }
    }),
  { ssr: false },
)

Via CDN (no bundler)

Load it from a CDN like unpkg or jsDelivr. Pin to a specific version to avoid unexpected breaking changes:

<script
  type="module"
  src="https://unpkg.com/@real-life-talent-tree/widget@latest/dist/talent-tree.js"
></script>
<talent-tree username="your-username" slug="your-tree-slug"></talent-tree>

Replace @latest with a specific version (e.g. @1.0.2) for a stable embed.

Next.js

Use next/script instead of a raw <script> tag:

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://unpkg.com/@real-life-talent-tree/widget@latest/dist/talent-tree.js"
        strategy="afterInteractive"
      />
      <talent-tree username="your-username" slug="your-tree-slug" />
    </>
  )
}

Attributes

Attribute	Type	Required	Description
username	string	Yes	The tree owner's username
slug	string	Yes	The tree's URL slug

The element fetches the published tree from the platform API automatically. The tree must be published — drafts are not accessible via the public API.

Theming

The widget exposes the same CSS custom properties as @real-life-talent-tree/ui. Set them on the <talent-tree> element or any ancestor:

talent-tree {
  --tt-level-1: #9d9d9d;
  --tt-level-5: #ff8000;
  --tt-node-bg: transparent;
  --tt-text-primary: #5c3317;
}

See the ThemeProvider reference for the full list of CSS variables.

Direct data injection (advanced)

If you already have the tree data, assign it to the .tree property directly instead of fetching:

import '@real-life-talent-tree/widget'

const el = document.querySelector('talent-tree')
el.tree = myTreeObject // TalentTree domain object — skips the API fetch