@web-demo-platform/react

GuideMark guided demo and product tour runtime for React apps.

This package exposes the high-level consumer API, including DemoExperience, provider/hooks, and optional license validation. The published npm artifact is bundled without source maps and does not include source-repository metadata by default.

GuideMark is the commercial product name. The package name stays @web-demo-platform/react during the npm migration.

Install

Install the published package name from npm:

pnpm add @web-demo-platform/react

If you publish the staged artifact under a different package name, install that name instead.

Quick Start

Add stable anchor ids to the UI elements you want to highlight:

<button data-demo-id="invite-user-button">Invite user</button>

Create a tour definition:

import type { DemoTourDefinition } from "@web-demo-platform/react";

export const gettingStartedTour: DemoTourDefinition = {
  id: "getting-started",
  version: 1,
  name: "Getting Started",
  steps: [
    {
      id: "welcome",
      title: "Welcome",
      body: "This tour introduces the main workflow.",
      viewId: "dashboard",
      placement: "center",
    },
  ],
};

Mount DemoExperience in your app:

import { DemoExperience } from "@web-demo-platform/react";
import { gettingStartedTour } from "./demo/getting-started-tour";

export function AppShell() {
  return (
    <DemoExperience
      currentView="dashboard"
      navigateToView={(viewId) => {
        console.log("navigate", viewId);
      }}
      tour={gettingStartedTour}
      autoStart
    >
      <App />
    </DemoExperience>
  );
}

Optional Licensing

DemoExperience supports an optional license prop so host apps can block or warn when a commercial entitlement is missing or invalid.

That hook is designed for host-supplied validation results, not for embedding your full licensing rules in the browser.

For the full licensing API and commercialization guidance, see:

• your commercial licensing documentation or entitlement service
• your internal integration notes for customer apps