@hdhub/bodygraph-2d

Human Design 2D Bodygraph SVG visualization component for React.

Live Demo

Requirements

This package requires an Enterprise API key from Human Design Hub.

HdhubProvider fetches the shared SVG config from the HD Hub server at runtime. You still pass the chart result itself through the data prop.

Without a valid API key, the component cannot initialize.

Installation

npm install @hdhub/bodygraph-2d

Usage

import { HdhubProvider, BodyGraphSVG } from "@hdhub/bodygraph-2d";

const chartData = {
  centers: { defined: ["Head", "Ajna", "Throat", "G", "Sacral"] },
  gates: [1, 8, 13, 33],
  channels: [{ gates: [1, 8] }],
  gate_and_line: {
    personality: {
      Sun: { gate: 1, line: 1 },
      Earth: { gate: 8, line: 1 },
    },
    design: {
      Sun: { gate: 13, line: 1 },
      Earth: { gate: 33, line: 1 },
    },
  },
};

function App() {
  return (
    <HdhubProvider apiKey="YOUR_API_KEY" apiBaseUrl="https://api.humandesignhub.app">
      <BodyGraphSVG data={chartData} />
    </HdhubProvider>
  );
}

Render Profiles

Use renderProfile to switch between supported visibility/layout modes.

<BodyGraphSVG data={chartData} renderProfile="standard" />
<BodyGraphSVG data={chartData} renderProfile="dreamrave" />

Supported values:

• standard: full 9-center bodygraph
• dreamrave: first-pass DreamRave visibility profile

Current DreamRave scope:

• hides non-DreamRave centers, channels, gates, and integration legs
• includes first-pass DreamRave-specific gate layout overrides and floating portal gate placement
• does not yet include DreamRave-specific chart math

Type Exports

The package exports the main prop types for integration:

• BodyGraphSVGProps
• BodyGraphRenderProfile
• HumanDesignData
• HdhubProviderProps

How to Get an API Key

1. Visit humandesignhub.app
2. Subscribe to an Enterprise plan
3. Generate your API key from the dashboard

License

UNLICENSED - All rights reserved.