Playbasis

React SDK

Bring Playbasis to any modern web app with first-class support for Next.js, Remix, or Vite. The SDK ships with hooks, offline caching, and UI components that render with standard HTML elements. React Native support is paused for this release.

Installation

pnpm add @playbasis/client @playbasis/ui

Creating the client

import { PlaybasisClient } from '@playbasis/client';
import { createPlaybasisHooks } from '@playbasis/client/react';

const client = new PlaybasisClient({
  baseUrl: 'https://api.example.com/v1',
  apiKey: process.env.EXPO_PUBLIC_PLAYBASIS_KEY ?? '',
});

export const hooks = createPlaybasisHooks({ client });

Using UI components

import { BadgeGrid, QuestCard } from '@playbasis/ui';
import { hooks } from '../hooks/playbasis';

export function QuestFeed() {
  const { useQuests } = hooks;
  const quests = useQuests().data?.items ?? [];

  return (
    <BadgeGrid
      badges={quests.map((quest) => ({
        id: quest.id,
        title: quest.name,
        description: quest.description ?? undefined,
      }))}
    />
  );
}

Offline caching

The SDK uses React Query under the hood, so you get caching and refetch policies for free. Configure the query client persistence layer to cache player state between sessions.

Framework compatibility

The Experience Kit includes a Next.js example you can copy from apps/examples/web. Because the UI renders regular DOM elements you can also drop it into Remix, Vite, or any React SPA without extra shims.

Next steps

  • Builder quickstart
  • Mobile example gallery coming soon
  • Sandbox key request flow in development