Remix experiments installation

Install the package

Required

Remix version

This guide is for Remix v2. For Remix v3, see our React Router v7 docs.

Install the PostHog JavaScript library using your package manager:

npm install posthog-js
yarn add posthog-js
pnpm add posthog-js

Configure Vite

Required

Add posthog-js and posthog-js/react to ssr.noExternal in your vite.config.ts so they get bundled for SSR:

vite.config.ts
// ... imports and rest of config

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: ["posthog-js", "posthog-js/react"],
  },
});

Create a provider

Required

Create a provider.tsx file in the app folder. Set up the PostHog provider to initialize after hydration:

app/provider.tsx
import { useEffect, useState } from "react";
import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";

export function PHProvider({ children }: { children: React.ReactNode }) {
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    posthog.init("<ph_project_api_key>", {
      api_host: "https://us.i.posthog.com",
      defaults: "2025-11-30"
    });

    setHydrated(true);
  }, []);

  if (!hydrated) return <>{children}</>;
  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
}

Wrap your app

Required

Import the PHProvider component in your app/root.tsx file and use it to wrap your app:

app/root.tsx
// ... imports
import { PHProvider } from "./provider";

// ... links, meta, etc.

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <PHProvider>
          {children}
          <ScrollRestoration />
          <Scripts />
        </PHProvider>
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

Implement your experiment

Required

Experiments run on top of our feature flags. You can define which version of your code runs based on the return value of the feature flag.

For client-side experiments, use the JavaScript snippet. For server-side experiments, use the Node.js snippet:

if (posthog.getFeatureFlag('your-experiment-feature-flag') === 'test') {
    // Do something differently for this user
} else {
    // It's a good idea to let control variant always be the default behaviour,
    // so if something goes wrong with flag evaluation, you don't break your app.
}

// Test that it works
posthog.featureFlags.overrideFeatureFlags({ flags: {'your-experiment-feature-flag': 'test'} })

6
Run your experiment
Required
Once you've implemented the feature flag in your code, you'll enable it for a target audience by creating a new experiment in the PostHog dashboard.

Next steps

Recommended

Resource	Description
Creating an experiment	How to create an experiment in PostHog
Adding experiment code	How to implement experiments for all platforms
Statistical significance	Understanding when results are meaningful
Experiment insights	How to analyze your experiment data
More tutorials	Other real-world examples and use cases

Remix experiments installation

Install the package

Configure Vite

Create a provider

Wrap your app

Implement your experiment

Run your experiment

Next steps

Community questions

Was this page useful?