@fanfare-io/fanfare-sdk-solid
SolidJS components and framework-agnostic web components for Fanfare controlled-access experiences, built on @fanfare-io/fanfare-sdk-core.
Use it in Solid applications directly, or anywhere mounting React is not practical (static HTML, CMS pages, non-React hosts) via the <fanfare-experience-widget> custom element.
States Covered
The component surface is derived from the SDK journey model: journeyStage, then sequence.phase, then sequence.mechanism. The server stays authoritative over what is permitted.
ready: renders the start view and exposesstart(opts?).routing: renders loading UI while the route is selected.gated: renders auth, access-code, or challenge UI for the active gate.routed: renders the sequence UI forunavailable,scheduled,enterable,participating,settling,granted, andended.
For routed journeys, the default widget renders queue, draw, auction, timed_release, and appointment modules across their supported phases. It renders waitlist entry through UpcomingModule and waitlist participation through WaitlistView. settling renders for draw and auction. granted renders for queue, draw, auction, and timed_release.
Install
npm install @fanfare-io/fanfare-sdk-core @fanfare-io/fanfare-sdk-solid solid-jsUsage
<script type="module">
import { registerWebComponents } from "@fanfare-io/fanfare-sdk-solid";
registerWebComponents({
organizationId: "org_123",
publishableKey: "pk_live_123",
});
</script>
<fanfare-experience-widget experience-id="exp_123" auto-start checkout-url="/checkout"></fanfare-experience-widget>Solid applications can use FanfareProvider, ExperienceWidget, and useExperienceJourney directly: the same journey contract as the React adapter, with Solid reactivity.
slots override targeted states while keeping the default widget flow. children receives { journey, view, snapshot, error, start, isStarting } when you want to render the full state yourself. Solid ExperienceWidget accepts both class and className.