# Remix experiments installation - Docs 1. 1 ## Install the package Required **Remix version** This guide is for Remix v2. For Remix v3, see our [React Router v7 docs](/docs/libraries/react-router.md). Install the PostHog JavaScript library using your package manager: PostHog AI ### npm ```bash npm install posthog-js ``` ### yarn ```bash yarn add posthog-js ``` ### pnpm ```bash pnpm add posthog-js ``` 2. 2 ## 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 PostHog AI ```typescript // ... 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"], }, }); ``` 3. 3 ## 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 PostHog AI ```typescript 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("", { api_host: "https://us.i.posthog.com", defaults: "2026-01-30" }); setHydrated(true); }, []); if (!hydrated) return <>{children}; return {children}; } ``` 4. 4 ## Wrap your app Required Import the `PHProvider` component in your `app/root.tsx` file and use it to wrap your app: app/root.tsx PostHog AI ```typescript // ... imports import { PHProvider } from "./provider"; // ... links, meta, etc. export function Layout({ children }: { children: React.ReactNode }) { return ( {children} ); } export default function App() { return ; } ``` 5. 5 ## 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: ```javascript 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. 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. 7. 7 ## Next steps Recommended Now that you're running experiments, continue with the resources below to learn what else Experiments enables within the PostHog platform. | Resource | Description | | --- | --- | | [Creating an experiment](/docs/experiments/creating-an-experiment.md) | How to create an experiment in PostHog | | [Adding experiment code](/docs/experiments/adding-experiment-code.md) | How to implement experiments for all platforms | | [Statistical significance](/docs/experiments/statistics-bayesian.md) | Understanding when results are meaningful | | [Experiment insights](/docs/experiments/analyzing-results.md) | How to analyze your experiment data | | [More tutorials](/docs/experiments/tutorials.md) | Other real-world examples and use cases | ### Community questions Ask a question ### Was this page useful? HelpfulCould be better