# Remix session replay 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 ## Watch session recordings Recommended Visit your site or app and interact with it for at least 10 seconds to generate a recording. Navigate between pages, click buttons, and fill out forms to capture meaningful interactions. [Watch your first recording →](/replay/home.md) 6. 6 ## Next steps Recommended Now that you're recording sessions, continue with the resources below to learn what else Session Replay enables within the PostHog platform. | Resource | Description | | --- | --- | | [Watching recordings](/docs/session-replay/how-to-watch-recordings.md) | How to find and watch session recordings | | [Privacy controls](/docs/session-replay/privacy.md) | How to mask sensitive data in recordings | | [Network recording](/docs/session-replay/network-recording.md) | How to capture network requests in recordings | | [Console log recording](/docs/session-replay/console-log-recording.md) | How to capture console logs in recordings | | [More tutorials](/docs/session-replay/tutorials.md) | Other real-world examples and use cases | ### Community questions Ask a question ### Was this page useful? HelpfulCould be better