Remix and React Router

Run init

It signs you in, creates the site, writes the environment variable and renders the component next to <Outlet /> in app/root.tsx.

npx satsu-analytics init

Skip to Verify it works if init finished. To do it by hand, continue with the next steps.

Or install the package yourself

npm install satsu-analytics

Set the site ID

Create a site in the dashboard (Sites → your site → install) and put its ID into .env:

VITE_SATSU_SITE=YOUR_ID

The component falls back to VITE_SATSU_SITE when you don't pass site.

Add the component

In app/root.tsx:

import { Outlet } from "@remix-run/react";
import { Satsu } from "satsu-analytics/remix";
 
export default function App() {
  return (
    <>
      <Outlet />
      <Satsu />
    </>
  );
}

On React Router v7, import Outlet from react-router instead.

Verify it works

Run npm run dev. On localhost the tracker itself is not loaded; the component sends one dev ping per page load so the install check can confirm the setup, and it is never counted or shown in your stats. After you deploy, follow Verify it works to see the first real visit.