> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metrifox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Metrifox frontend and backend SDKs: v2.0.0+ unified theme API, live playgrounds per framework, and backend SDKs.

## What are the Metrifox SDKs?

The Metrifox SDKs ship ready-made UI (customer portal, pricing table) and server-side helpers for billing, subscriptions, entitlements, and checkout—so you do not rebuild those flows from scratch.

***

## How it works

<Steps>
  <Step title="Install">
    Add the package for your stack (`npm` / `pnpm` / `yarn`, or backend equivalents).
  </Step>

  <Step title="Initialize">
    Frontend: **client key** via `metrifoxInit` or `MetrifoxService.initialize`. Backend: **secret key** per SDK docs.
  </Step>

  <Step title="Embed widgets">
    Mount portal and pricing components, then tune appearance using the **v2.0.0+** theme API only.
  </Step>
</Steps>

***

## Live playgrounds (by framework)

Use these environments to evaluate props, theming, and component behavior before integrating the SDK into your application:

<CardGroup cols={2}>
  <Card title="React playground" icon="react" href="https://playground.metrifox.com/react">
    Customer Portal and Pricing Table in a React shell—best reference when building Next.js or Vite apps.
  </Card>

  <Card title="Angular playground" icon="angular" href="https://playground.metrifox.com/angular">
    Same widgets with Angular standalone components and `MetrifoxService` patterns.
  </Card>
</CardGroup>

A combined entry point is also available at [playground.metrifox.com](https://playground.metrifox.com/) if you want a single landing page.

***

## Frontend widgets

<CardGroup cols={2}>
  <Card title="Customer Portal" icon="user">
    Self-serve dashboard: subscription, plan, billing history, wallet, usage, payments.
  </Card>

  <Card title="Pricing Table" icon="tag">
    Plans and one-time purchases with checkout integration.
  </Card>
</CardGroup>

Guides: [React](/sdks/frontend/react) · [Angular](/sdks/frontend/angular)

***

## Backend capabilities

<CardGroup cols={2}>
  <Card title="Checkout" icon="cart-shopping">
    Generate checkout URLs and server-side purchase flows.
  </Card>

  <Card title="Usage & entitlements" icon="chart-simple">
    Record usage and verify access from your API layer.
  </Card>
</CardGroup>

Guides: [Python](/sdks/backend/python) · [JavaScript / Node](/sdks/backend/javascript) · [Ruby](/sdks/backend/ruby)

***

## Supported languages and frameworks

### Frontend

<CardGroup cols={2}>
  <Card title="React" icon="react" href="/sdks/frontend/react">
    React 18+, Next.js, Vite, and other React bundlers.
  </Card>

  <Card title="Angular" icon="angular" href="/sdks/frontend/angular">
    Angular 17–19, standalone components.
  </Card>
</CardGroup>

### Backend

<CardGroup cols={3}>
  <Card title="Python" icon="python" href="/sdks/backend/python">
    Django, Flask, FastAPI, and similar.
  </Card>

  <Card title="Node.js" icon="node-js" href="/sdks/backend/javascript">
    Express, NestJS, and more.
  </Card>

  <Card title="Ruby" icon="gem" href="/sdks/backend/ruby">
    Rails, Sinatra, and similar.
  </Card>
</CardGroup>

***

## Demo source

<CardGroup cols={1}>
  <Card title="Metrifox SDK demo repository" icon="github" href="https://github.com/metrifox/metrifox-sdk-demo">
    Reference implementations that pair with the playgrounds above.
  </Card>
</CardGroup>

***

## Release notes

Breaking changes and version history: **[SDK changelog](/sdks/changelog)**.