# Remix quickstart ## 1. Install `hypertune` Once you have a Remix application ready, install Hypertune's JavaScript SDK: {% tabs %} {% tab title="npm" %} ```bash npm install hypertune ``` {% endtab %} {% tab title="yarn" %} ```bash yarn add hypertune ``` {% endtab %} {% tab title="pnpm" %} ```bash pnpm add hypertune ``` {% endtab %} {% endtabs %} ## 2. Set environment variables Define the following environment variables in your `.env` file: {% code title=".env" %} ```bash HYPERTUNE_TOKEN=token HYPERTUNE_FRAMEWORK=remix HYPERTUNE_OUTPUT_DIRECTORY_PATH=app/generated ``` {% endcode %} Replace `token` with your main project token which you can find in the Settings tab of your project. ## 3. Generate the client Generate a type-safe client to access your flags by running: {% tabs %} {% tab title="npm" %} ```bash npx hypertune ``` {% endtab %} {% tab title="yarn" %} ```bash yarn hypertune ``` {% endtab %} {% tab title="pnpm" %} ```bash pnpm hypertune ``` {% endtab %} {% endtabs %} ## 4. Use the client Add a new file called `getHypertune.server.ts` that exports a `getHypertune` function: {% code title="app/lib/getHypertune.server.ts" %} ```typescript import { createSource } from '~/generated/hypertune' const hypertuneSource = createSource({ token: process.env.HYPERTUNE_TOKEN!, }) export default async function getHypertune() { await hypertuneSource.initIfNeeded() // Check for flag updates return hypertuneSource.root({ args: { context: { environment: process.env.NODE_ENV, user: { id: 'e23cc9a8-0287-40aa-8500-6802df91e56a', name: 'Example User', email: 'user@example.com', }, }, }, }) } ``` {% endcode %} {% tabs %} {% tab title="Server-side rendering" %} To access flags in `loader` during server-side rendering, use the `getHypertune` function: {% code title="app/routes/ssr.tsx" %} ```tsx import { json } from '@remix-run/node' import { useLoaderData } from '@remix-run/react' import getHypertune from '~/lib/getHypertune.server' export async function loader() { const hypertune = await getHypertune() const exampleFlag = hypertune.exampleFlag({ fallback: false }) return json({ exampleFlag }) } export default function Page() { const { exampleFlag } = useLoaderData() return

Example Flag: {exampleFlag}

} ``` {% endcode %} {% endtab %} {% tab title="Client-side rendering" %} To access flags in the browser during client-side rendering, first wrap your root layout with the generated `` component in `app/root.tsx`: {% code title="app/root.tsx" %} ```tsx import { json } from '@remix-run/node' import { useLoaderData, Links, Meta, Outlet, Scripts, ScrollRestoration, } from '@remix-run/react' import { DehydratedState } from './generated/hypertune' import { HypertuneProvider } from '~/generated/hypertune.react' import getHypertune from '~/lib/getHypertune.server' export async function loader() { const hypertune = await getHypertune() const token = process.env.HYPERTUNE_TOKEN! const dehydratedState = hypertune.dehydrate() const rootArgs = hypertune.getRootArgs() return json({ token, dehydratedState, rootArgs }) } export default function App() { const { token, dehydratedState, rootArgs } = useLoaderData() return ( ) } ``` {% endcode %} Then use the generated `useHypertune` hook: {% code title="app/components/ClientComponent.tsx" %} ```tsx import { useHypertune } from '~/generated/hypertune.react' export default function ClientComponent() { const hypertune = useHypertune() const exampleFlag = hypertune.exampleFlag({ fallback: false }) return

Example Flag: {String(exampleFlag)}

} ``` {% endcode %} **Notes** * **Hydration**: Passing `dehydratedState` from the server instantly hydrates the SDK in the browser. This ensures you can use flags on the first render with no layout shift, flicker, or delay. If omitted, the SDK will initialize in the background and trigger a re-render once ready. * **Root Args**: Passing `rootArgs` from the server lets you reuse the root args from `getHypertune` on the server. This is optional — you can also construct root args on the client. * **Content Security Policy**: If you use a CSP, add the following to your `connect-src` directive: `https://edge.hypertune.com https://gcp.fasthorse.workers.dev`. This enables reporting of flag evaluations, experiment exposures, and analytics events. {% endtab %} {% endtabs %} ## 5. (Optional) Add the Hypertune Toolbar The Hypertune Toolbar lets you view and override feature flags directly in your frontend. [Follow the guide](https://docs.hypertune.com/sdk-reference/hypertune-toolbar) to add it to your app. ## 6. (Optional) Include a build-time snapshot To improve reliability, you can include a snapshot of your flag logic in the generated client at build time. The SDK will instantly initialize from the snapshot first before fetching the latest flag logic from [Hypertune Edge](https://docs.hypertune.com/concepts/hypertune-edge). Add the following environment variable to your `.env` file: ```bash HYPERTUNE_INCLUDE_INIT_DATA=true ``` Then regenerate the client. You can keep the snapshot fresh by setting up a [webhook](https://docs.hypertune.com/integrations/webhooks) to regenerate the client on every Hypertune commit. In this case, you don't need to initialize from Hypertune Edge at all, eliminating network latency and bandwidth, improving both performance and efficiency. ## Next steps Now you can update the logic for `exampleFlag` from the Hypertune UI without updating your code or waiting for a new build, deployment, or app release. To add a new flag, create it in the Hypertune UI then regenerate the client.