Hellixitboard

Hellixitboard is exported as a React component that you can embed directly in your app.

Installation

Install the package together with its React peer dependencies.

npm install react react-dom @hellixit/hellixitboard
# or
yarn add react react-dom @hellixit/hellixitboard

Quick start

The minimum working setup has two easy-to-miss requirements:

1. Import the package CSS:

import "@hellixit/hellixitboard/index.css";

2. Render Hellixitboard inside a container with a non-zero height.

import { Hellixitboard } from "@hellixit/hellixitboard";
import "@hellixit/hellixitboard/index.css";

export default function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Hellixitboard />
    </div>
  );
}

Hellixitboard fills 100% of the width and height of its parent. If the parent has no height, the canvas will not be visible.

Next.js / SSR frameworks

Hellixitboard should be rendered on the client. In SSR frameworks such as Next.js, use a client component and load it dynamically with SSR disabled.

// app/components/HellixitboardClient.tsx
"use client";

import { Hellixitboard } from "@hellixit/hellixitboard";
import "@hellixit/hellixitboard/index.css";

export default function HellixitboardClient() {
  return (
    <div style={{ height: "100vh" }}>
      <Hellixitboard />
    </div>
  );
}

// app/page.tsx
import dynamic from "next/dynamic";

const HellixitboardClient = dynamic(
  () => import("./components/HellixitboardClient"),
  { ssr: false },
);

export default function Page() {
  return <HellixitboardClient />;
}

LLM / agent tips

If an LLM or coding agent is setting up Hellixitboard, these shortcuts usually save more time than re-prompting:

• Start with a plain <Hellixitboard /> in a 100vh container. Add refs, initialData, persistence, or custom UI only after the base embed works.
• If the canvas is blank, check the CSS import and parent height first. Those are the two most common integration failures.
• In Next.js or other SSR frameworks, assume client-only rendering first. Use "use client" and dynamic(..., { ssr: false }) before debugging hydration or window is not defined errors.
• If imports or entrypoints are unclear, inspect node_modules/@hellixit/hellixitboard/package.json. The installed package exports are the source of truth.
• Do not set window.HELLIXITBOARD_ASSET_PATH unless you are intentionally self-hosting fonts/assets.

Self-hosting fonts

By default, Hellixitboard downloads the fonts it needs from the CDN.

For self-hosting, copy the contents of node_modules/@hellixit/hellixitboard/dist/prod/fonts into the path where your app serves static assets, for example public/. Then set window.HELLIXITBOARD_ASSET_PATH to that same path:

<script>
  window.HELLIXITBOARD_ASSET_PATH = "/";
</script>

Demo

Try the live demo at board.hellixit.cloud.