Skip to main content

​
Welcome to WellPlayed SDK

The WellPlayed SDK provides a comprehensive toolkit for integrating gaming tournament functionality into your applications. Built with TypeScript and React, it offers seamless authentication, real-time updates, and full access to the WellPlayed.gg platform.

Quickstart

Get up and running with WellPlayed in minutes

React SDK

React components and hooks for tournament features

TypeScript SDK

Type-safe GraphQL client for Node.js and browsers

API Reference

Complete API documentation and type definitions

​
What is WellPlayed.gg?

WellPlayed.gg is a comprehensive gaming tournament platform that enables developers to build competitive gaming experiences. The platform provides:
  • Tournament Management: Create and manage tournaments with brackets, groups, and custom formats
  • Player Profiles: Unified player identity across multiple gaming platforms
  • Team Management: Organize teams, manage rosters, and handle team registrations
  • Real-time Updates: WebSocket subscriptions for live tournament data
  • Rich Content: Render tournament descriptions and announcements with rich text support

​
Key Features

The WellPlayed SDK brings powerful features to your application:
Built-in authentication flow using OpenID Connect. The WellPlayedProvider component handles the entire OAuth flow, token management, and automatic refresh.
<WellPlayedProvider
  organizationId="your-org-id"
  wpAppConfig={{
    client_id: "your-client-id",
    redirect_uri: `${window.location.origin}/login`,
    scope: "offline_access"
  }}
>
  <App />
</WellPlayedProvider>
Pre-built React hooks for common tournament operations:
  • useTournamentTeams - Fetch and manage tournament teams by status
  • useTournamentStep - Load complete tournament bracket data with scores
  • Real-time data synchronization and automatic updates
Unified player data across gaming platforms:
  • usePlayers - Batch fetch player profiles with custom fields
  • useConnectedPlayer - Access authenticated user’s profile and permissions
  • Multi-platform identity linking (Steam, Discord, etc.)
Two powerful ways to interact with the API:
  • Apollo Client - Full-featured GraphQL client with caching and subscriptions
  • Typed Client - Type-safe batch queries with automatic code generation
Both clients support:
  • Automatic request batching
  • Built-in authentication
  • TypeScript type inference
The RichTextEditorContent component safely renders user-generated HTML content from tournament descriptions, announcements, and player profiles using TipTap.
Subscribe to live tournament events:
  • Match score updates
  • Team registration changes
  • Tournament status transitions
  • Player join/leave events

​
Architecture

The WellPlayed SDK is split into two complementary packages:

​
React SDK (@well-played.gg/react-sdk)

The React SDK provides:
  • WellPlayedProvider - Context provider with authentication
  • Pre-built hooks for tournaments, teams, and players
  • RichTextEditorContent component
  • Automatic Apollo Client configuration

​
TypeScript SDK (@well-played.gg/typescript-sdk)

The TypeScript SDK provides:
  • createWellPlayedClient - Apollo Client factory with caching policies
  • createTypedClient - Type-safe GraphQL client with batching
  • graphql - Tagged template for type-safe queries
  • GraphQL operation generators (generateQueryOp, generateMutationOp, generateSubscriptionOp)
The React SDK depends on the TypeScript SDK and re-exports its core functionality. You can use the TypeScript SDK standalone in Node.js applications or non-React environments.

​
Use Cases

Tournament Websites

Build public-facing tournament websites with live brackets, team rosters, and player profiles

Gaming Communities

Create community platforms with integrated tournament features and player leaderboards

Esports Platforms

Develop comprehensive esports platforms with multi-tournament support and team management

Game Integrations

Embed tournament functionality directly into your game client or companion app

​
Next Steps

1

Get Started

Follow the Quickstart guide to set up your first WellPlayed integration
2

Configure Authentication

Create an application in the WellPlayed Console to get your credentials
3

Explore the API

Browse the API Reference to discover available hooks and components
4

Build Your Feature

Check out the Guides for common implementation patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us