# Examples (/docs/examples)



Each example below is a small, runnable project that wires Improve into a specific framework. They all run the same A/B test (`startpage-visual`) so you can compare how the integration differs between a static site, a client app and a server rendered app.

The full source for every example lives in the [public SDK repository](https://github.com/Obelism/improve-sdk/tree/main/examples). Clone it, run `npm install` and `npm run dev` in any example folder to try it locally. Each one is also deployed live at `<example>.improve.obelism.studio`; both links are on every example page below.

## Client side [#client-side]

Render the control on first paint and swap to the visitor's variant once the SDK mounts in the browser. Simplest to set up, but causes layout shift (CLS) for content above the fold.

<Cards>
  <Card title="Static HTML" href="/docs/examples/html" description="Vanilla JavaScript on a static page using the Client SDK" />

  <Card title="React" href="/docs/examples/react" description="A React SPA using the React SDK provider and hooks" />
</Cards>

## Server side [#server-side]

Decide the variant before the response is sent, so the first paint already matches the visitor's variant: no layout shift. For a page you can prerender, see our recommended setup: [Server-side tests on static pages](/docs/guides/static-server-side-tests).

<Cards>
  <Card title="Next.js" href="/docs/examples/nextjs" description="Server side A/B testing through Next.js middleware" />

  <Card title="Next.js + Vercel" href="/docs/examples/nextjs-vercel" description="Next.js middleware reading the datafile from Vercel Edge Config" />

  <Card title="Hono" href="/docs/examples/hono" description="Server SDK on Hono with manual cookie handling" />
</Cards>