Skip to main content

​
Solid SDK Overview

The @waitify-io/fanfare-sdk-solid package provides SolidJS components and web components for the Fanfare platform. It is the foundation for all Fanfare widgets, which can be used directly in SolidJS applications or as web components in any framework.

​
Installation

npm install @waitify-io/fanfare-sdk-solid @waitify-io/fanfare-sdk-core

​
Architecture

The Solid SDK serves two purposes:
  1. SolidJS Components - Native SolidJS components for SolidJS applications
  2. Web Components - Framework-agnostic widgets that work in React, Vue, Angular, or vanilla HTML
┌─────────────────────────────────────────────────────────────┐
│                Your Application                              │
├─────────────────────────────────────────────────────────────┤
│  Web Components (any framework)                              │
│  - <fanfare-queue-widget>                                    │
│  - <fanfare-draw-widget>                                     │
│  - <fanfare-auction-widget>                                  │
│  - <fanfare-experience-widget>                               │
├─────────────────────────────────────────────────────────────┤
│  SolidJS Components (SolidJS apps)                           │
│  - <QueueWidget>                                             │
│  - <DrawWidget>                                              │
│  - <AuctionWidget>                                           │
│  - <ExperienceWidget>                                        │
├─────────────────────────────────────────────────────────────┤
│  @waitify-io/fanfare-sdk-solid                               │
├─────────────────────────────────────────────────────────────┤
│  @waitify-io/fanfare-sdk-core                                │
└─────────────────────────────────────────────────────────────┘

​
Quick Start

​
SolidJS Application

import { Fanfare } from "@waitify-io/fanfare-sdk-core";
import { FanfareProvider, QueueWidget } from "@waitify-io/fanfare-sdk-solid";
import { createResource } from "solid-js";

function App() {
  const [sdk] = createResource(async () => {
    return Fanfare.init({
      organizationId: "org_xxx",
      publishableKey: "pk_live_xxx",
    });
  });

  return (
    <Show when={sdk()}>
      <FanfareProvider sdk={sdk()!}>
        <QueueWidget queueId="queue_123" />
      </FanfareProvider>
    </Show>
  );
}

​
Web Components (Any Framework)

import { registerWebComponents } from "@waitify-io/fanfare-sdk-solid";

// Register once at app startup
registerWebComponents({
  organizationId: "org_xxx",
  publishableKey: "pk_live_xxx",
});

// Then use anywhere in your HTML/JSX
function QueuePage() {
  return <fanfare-queue-widget queue-id="queue_123" />;
}

​
Package Exports

​
Components

ComponentDescription
FanfareProviderContext provider for SDK
ThemeProviderTheme context provider
QueueWidgetVirtual waiting room widget
DrawWidgetLottery/raffle widget
AuctionWidgetReal-time bidding widget
WaitlistWidgetPre-registration widget
TimedReleaseWidgetFlash sale widget
ExperienceWidgetFull journey orchestration

​
Primitives

PrimitiveDescription
ButtonStyled button component
CardCard container components
InputForm input component
BadgeStatus badge component
SpinnerLoading spinner
CountdownCountdown timer display
ProgressProgress bar component

​
Hooks

HookDescription
useFanfareAccess SDK instance
useQueueQueue state and actions
useDrawDraw state and actions
useAuctionAuction state and actions
useWaitlistWaitlist state and actions
useTimedReleaseTimed release state/actions
useExperienceJourneyJourney orchestration
useTranslationsi18n translations

​
Web Component Registration

import { registerWebComponents } from "@waitify-io/fanfare-sdk-solid";

registerWebComponents({
  organizationId: string;
  publishableKey: string;
  locale?: Locale;
  translations?: PartialTranslationMessages;
  themeConfig?: ExperienceTheme;
  variant?: WidgetVariant;
});

​
Why SolidJS?

The Fanfare SDK uses SolidJS for widgets because:
  1. Small Bundle Size - SolidJS compiles to minimal JavaScript
  2. No Virtual DOM - Direct DOM updates for better performance
  3. Web Component Support - Native custom elements compilation
  4. Fine-grained Reactivity - Efficient state updates

​
TypeScript Support

Full TypeScript support with exported types: 
import type {
  QueueWidgetProps,
  DrawWidgetProps,
  AuctionWidgetProps,
  ExperienceWidgetProps,
  QueueSlotProps,
  QueueRenderProps,
  ExperienceTheme,
  WidgetVariant,
} from "@waitify-io/fanfare-sdk-solid";