Vite

Most people don't need this

sunboard init does all of this automatically — see the Quick start. Follow this page if you'd rather wire things by hand, or want to understand exactly what init changes.

This wires the Sunboard runtime into a React + Vite app: install the SDK, mount a provider at your app entry, and point it at your project with a publishable key.

Install the SDK

npm install @sunboard/react

pnpm add @sunboard/react

yarn add @sunboard/react

bun add @sunboard/react

Add your publishable key

Vite exposes env vars prefixed with VITE_ to the browser. Put your project's runtime key in .env.local:

.env.local

VITE_SUNBOARD_KEY=pk_live_xxx

Create the runtime wrapper

This component reads the current location and renders the Sunboard widgets. Create it under src/.

src/sunboard-provider.tsx

import { SunboardProvider, Sunboard } from "@sunboard/react";
import type { ReactNode } from "react";

export function SunboardRuntime({ children }: { children: ReactNode }) {
  const route =
    typeof window === "undefined"
      ? "/"
      : `${window.location.pathname}${window.location.search}`;

  return (
    <SunboardProvider
      publishableKey={import.meta.env.VITE_SUNBOARD_KEY}
      // Replace with your real authenticated user.
      user={{
        id: "demo-user",
        email: "demo@example.com",
        group: "demo",
      }}
      route={route}
      navigate={(url) => window.location.assign(url)}
    >
      {children}
      <Sunboard.Checklist />
      <Sunboard.Hotspots />
      <Sunboard.Tour />
    </SunboardProvider>
  );
}

Client-side navigation

The default navigate does a full-page load. If you use a router (React Router, etc.), swap it for your router's navigation so tour route changes stay client-side.

Mount it at your app entry

Import the Sunboard stylesheet before your own global CSS, then wrap your root element.

src/main.tsx

import "@sunboard/react/styles.css";
import "./index.css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { SunboardRuntime } from "./sunboard-provider";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <SunboardRuntime>
      <App />
    </SunboardRuntime>
  </StrictMode>,
);

The wrapper ships a placeholder user. Replace it with your authenticated user so segments and analytics are accurate. Only id is required; anything you put under properties is available for segment targeting:

user={{
  id: currentUser.id,
  email: currentUser.email,
  group: currentUser.plan, // optional cohort, e.g. "trial" / "pro"
  properties: {
    // Any custom attributes you want to target on.
    role: currentUser.role,
    signupDate: currentUser.createdAt,
    workflowsCreated: currentUser.workflowCount,
  },
}}

Install the SDK

Add your publishable key

Create the runtime wrapper

Mount it at your app entry

Wire your real user

Verify

Next steps

Quick start

Spec

Implement

On this page