How PostHog.com works

PostHog.com is built and maintained in-house by the

Brand Team. You've probably never seen a Gatsby.js site like this before. Eli KinseyEli Kinsey is the mastermind behind how the site is structured.

For more context, read why we designed our website to look like an operating system.

The "operating system"

1. At the top level, gatsby-browser.tsx loads <Wrapper />
2. <Wrapper /> renders the chrome of the "operating system"
   1. <TaskBarMenu /> – the MacOS-style menu bar
   2. <Desktop /> – the desktop app icons and desktop background
   3. <AppWindow /> – the chrome for each app and where the content renders
   4. <CookieBannerToast />
3. <AppWindow /> loads <WindowProvider /> and <WindowContainer />.
   • This contains the window's top bar with the minimize, maximize, and close buttons. It also supports window resizing.
   • Inside here is where the contents of each app renders

The apps

Each "app" is simply a page like a normal Gatsby site. There are a handful of apps:

1. <ReaderView /> – used for all long-form content like the docs, handbook, blog
2. <Editor /> – a WYSIWYG page editor
3. <Explorer /> – an OS-style file explorer
4. <Inbox /> – an email-like app
5. <Presentation /> – a slide deck

Each app can reference shared components like <HeaderBar /> which contains the necessary navigational elements (like the back button, search, and filters).

Let's look at a product page to see how it uses the <Presentation /> template.

Example: posthog.com/session-replay

This page (/src/pages/session-replay/index.tsx) includes two critical pieces:

1. <SlidesTemplate /> – the views where the content will display
2. Defines the PRODUCT_HANDLE
3. Specifies which slides should appear in this presentation using createSlideConfig

<SlidesTemplate /> loads up all the various templates needed (like <OverviewComponent />, <CustomersSlide />, <FeaturesSlide />) and sources the content using the useProduct hook.

useProduct hook

Each product's data is defined in a JSON file like:

/src/hooks/productData/session_replay.tsx

When the session_replay handle is passed into useProduct, it looks up the product's data like:

• icon
• color
• category
• SEO data
• screenshots array
• feature customers
• features array
• feature comparison chart
• etcc

Note: The

Billing Team maintains a billing API that contains pricing tiers and entitlements. This is how pricing data and usage tiers stay in sync between the website and product. The plan is to eventually move the product data into the billing API so there's a single source of truth for every product.

---

Services we use

Website content is stored in two places:

1. Markdown/MDX files (in the GitHub repo) - most website content
   • Docs, handbook, most pages
2. Strapi - user-generated content
   • Community forum posts, community profiles