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

# SDK Overview

> What @edpire/sdk ships, the three entry points, installation, and how CSS is handled.

`@edpire/sdk` is the embeddable SDK for delivering, rendering, and grading Edpire assessments from your own application. It's one npm package with **three entry points** — pick the ones your integration needs.

<Note>
  The SDK is optional. The simplest integration ([Hosted Redirect](/developer/integration-tiers#hosted-redirect)) needs no SDK at all. Reach for the SDK when you want the assessment to render **inside your own page** or you're building a **custom learner experience**.
</Note>

## The three entry points

| Import               | Runs in            | Use it for                                                                                                                                                                                          |
| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `@edpire/sdk`        | Browser            | [Embedded Player](/developer/sdk/embedded-player) (`EdpireAssessment.mount()`) and [Custom Flow](/developer/sdk/custom-flow) helpers (`flattenAssessment`, `renderQuestion`, `buildSubmitPayload`). |
| `@edpire/sdk/react`  | Browser (React 19) | [React components](/developer/sdk/react-components): `EdpireAssessmentPlayer` (drop-in player), `AssessmentShell` (bring your own data), `EdpireQuestion` (single question for Custom Flow).        |
| `@edpire/sdk/client` | Node.js (18+)      | [Server client](/developer/sdk/server-client) (`EdpireClient`) — list assessments, mint embed tokens, submit, check, manage webhooks. API key never leaves the server.                              |

```typescript theme={null}
import { EdpireAssessment, flattenAssessment } from "@edpire/sdk"        // browser
import { EdpireAssessmentPlayer, EdpireQuestion } from "@edpire/sdk/react" // React
import { EdpireClient } from "@edpire/sdk/client"                        // server
```

For plain `<script>` / mobile WebViews, use the UMD/CDN build instead — see [CSS & CDN](#css) and [Mobile](/developer/mobile).

## Starter templates

The fastest way to get running — both examples ship inside the `@edpire/sdk` npm package:

```bash theme={null}
# Next.js App Router
npx --package=@edpire/sdk create-edpire-app nextjs my-app

# Vite + Express (works in dev and production)
npx --package=@edpire/sdk create-edpire-app vite-express my-app
```

Both use `createEdpireTokenHandler` + `<EdpireAssessmentPlayer>` and include a README with a `cp .env.example .env → npm install → npm run dev` quickstart.

## Installation

The SDK is published to the **public npm registry** — no auth token or `.npmrc` setup required.

```bash theme={null}
npm install @edpire/sdk
# or: pnpm add @edpire/sdk
```

**Peer dependencies:** `react@^19` and `react-dom@^19` (only required if you use `@edpire/sdk` in the browser or `@edpire/sdk/react`). The `@edpire/sdk/client` entry has **zero browser dependencies** and uses native `fetch`.

<Tip>
  Can't run the npm package — e.g. Flutter, native iOS/Android, or a strict no-bundler page? Load the **UMD build from a CDN** (`EdpireSDK` global) — no install needed. See [Mobile & WebView](/developer/mobile).
</Tip>

## Licensing & security

The package is public and free to install, but it carries a **proprietary license**: you may use it to integrate with Edpire, not to redistribute it or build a competing product. See the `LICENSE` in the package.

Being public is safe because the SDK is **not** Edpire's security boundary — the server is. The published bundle contains only the question **renderer**. It never includes:

* **Answer keys** — stripped from every client-facing payload.
* **Grading logic** — runs server-side; the SDK doesn't ship it.
* **API keys** — stay on your server; the browser only ever holds a short-lived, single-use, origin-scoped embed token.

So even though the JavaScript is readable (as all frontend code is), it grants no access to content, scoring, or your account. See [Security](/developer/security) for the full model.

## CSS

The SDK bundles all its styles **into its JavaScript** and injects them on first render. You normally don't import any CSS.

| Path                                                       | Behaviour                                                                                                                                                      |
| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Embedded Player** (`EdpireAssessment.mount()`)           | Fully automatic. Nothing to import.                                                                                                                            |
| **React components** (`AssessmentShell`, `EdpireQuestion`) | Automatic — `shell.css` is imported by the components themselves.                                                                                              |
| **Custom Flow**, styles missing                            | Only if inline-style injection is blocked (sandboxed iframe, strict CSP), import the fallback explicitly: `import "@edpire/sdk/styles/runtime-utilities.css"`. |

<Warning>
  Math rendering (KaTeX) and feedback states ship with the components — you do **not** need to import KaTeX CSS separately when using the SDK. (That's only required when integrating the raw `@youssefalmia/*` runtime packages directly.)
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Embedded Player" icon="window" href="/developer/sdk/embedded-player">
    Drop the full assessment player into your page with one function call.
  </Card>

  <Card title="Custom Flow" icon="wand-magic-sparkles" href="/developer/sdk/custom-flow">
    Build a Duolingo-style, question-by-question experience.
  </Card>

  <Card title="React components" icon="react" href="/developer/sdk/react-components">
    `AssessmentShell` and `EdpireQuestion` prop references.
  </Card>

  <Card title="Server client" icon="server" href="/developer/sdk/server-client">
    Every `EdpireClient` method, typed.
  </Card>
</CardGroup>