React Human Design Components — npm Package Guide

Complete guide to using the Human Design React npm packages for bodygraph visualization.

Installation

All three packages are available on the public npm registry. Install the one you need:

# 2D SVG bodygraph (most common)
npm install @hdhub/bodygraph-2d

# 3D WebGL bodygraph (Enterprise plan only)
npm install @hdhub/bodygraph-3d

# Gate timeline visualization
npm install @hdhub/gate-timeline

Requirements: React 18 or later. The packages use React hooks and modern JSX internally.

SDK Initialization

Before rendering any component, initialize the SDK with your API key. This authenticates your application and loads the rendering configuration from the server.

import { initSDK } from '@hdhub/bodygraph-2d';

// Call once at app startup
await initSDK({ apiKey: 'YOUR_API_KEY' });

The SDK init calls GET /v1/sdk/init to verify your API key and load glyph data, Center positions, and Gate connection maps. This call is free (zero credits) and should be done once per session.

Basic Usage: 2D Bodygraph

import { Bodygraph } from '@hdhub/bodygraph-2d';

function ChartView({ chartData }) {
  // chartData comes from POST /v1/bodygraph response
  return (
    <Bodygraph
      data={chartData}
      width={400}
      height={600}
    />
  );
}

The data prop accepts the JSON response from any bodygraph endpoint (/v1/bodygraph or /v1/simple-bodygraph). The component renders all defined Centers, active Gates, and Channels as an interactive SVG.

Packages Overview

@hdhub/bodygraph-2d

The primary package for most applications. Renders a responsive SVG bodygraph with:

9 Centers with defined/undefined states
64 Gates with activation indicators
36 Channels with connection lines
Customizable colors, labels, and tooltips
Hover and click interaction handlers
Responsive sizing

Plan requirement: Standard ($29.99/mo) or above.

@hdhub/bodygraph-3d

WebGL-powered 3D visualization for immersive experiences:

Full 3D rotation, zoom, and pan
Animated gate activations
Camera presets for different views
Performance-optimized for mobile

Plan requirement: Enterprise ($99.99/mo) only.

@hdhub/gate-timeline

Timeline visualization for transit data:

Horizontal timeline showing Gate activations over time
Color-coded by circuit (Individual, Tribal, Collective)
Zoomable date ranges
Integration with transit API endpoints

Plan requirement: Standard ($29.99/mo) or above.

Authentication

The npm packages are publicly installable — anyone can run npm install @hdhub/bodygraph-2d. However, the components require a valid API key at runtime via SDK initialization. Without a valid key, components will not render.

This means:

Your end users don’t need their own API key — your app uses yours
You control access through your subscription plan
The packages are safe to include in public repositories

Plan Requirements Summary

Package	Minimum Plan	Monthly Cost
@hdhub/bodygraph-2d	Standard	$29.99/mo
@hdhub/bodygraph-3d	Enterprise	$99.99/mo
@hdhub/gate-timeline	Standard	$29.99/mo