feat: add config builder

contents/docs/libraries/js/_snippets/JSConfigBuilder.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { ConfigBuilder, ConfigState } from 'components/Docs/ConfigBuilder'
+
+const generateCode = (config: ConfigState): string => {
+    const { selectedValue, checkboxes, inputs } = config
+    const apiKey = inputs.apiKey as string
+    const apiHost = selectedValue === 'eu-cloud' ? 'https://eu.i.posthog.com' : 'https://us.i.posthog.com'
+
+    const configLines: string[] = []
+    configLines.push(`    api_host: '${apiHost}',`)
+
+    if (checkboxes.useDefaults) configLines.push(`    defaults: '<ph_posthog_js_defaults>',`)
+    if (!checkboxes.enableAutocapture) configLines.push(`    autocapture: false,`)
+    if (checkboxes.spaMode) configLines.push(`    capture_pageview: 'history_change',`)
+    if (!checkboxes.enableSessionRecording) configLines.push(`    disable_session_recording: true,`)
+    if (checkboxes.recordConsoleLogs) configLines.push(`    enable_recording_console_log: true,`)
+    if (checkboxes.enableHeatmaps) configLines.push(`    enable_heatmaps: true,`)
+    if (!checkboxes.enableSurveys) configLines.push(`    disable_surveys: true,`)
+    if (checkboxes.maskAllText) configLines.push(`    mask_all_text: true,`)
+    if (checkboxes.maskAllAttributes) configLines.push(`    mask_all_element_attributes: true,`)
+    if (checkboxes.optOutByDefault) configLines.push(`    opt_out_capturing_by_default: true,`)
+
+    const persistence = inputs.persistence as string
+    if (persistence && persistence !== 'localStorage+cookie') {
+        configLines.push(`    persistence: '${persistence}',`)
+    }
+
+    if (!checkboxes.crossSubdomainCookie) configLines.push(`    cross_subdomain_cookie: false,`)
+    if (checkboxes.secureCookie) configLines.push(`    secure_cookie: true,`)
+    if (checkboxes.alwaysCreateProfiles) configLines.push(`    person_profiles: 'always',`)
+
+    return `posthog.init('${apiKey}', {\n${configLines.join('\n')}\n})`
+}
+
+const getFilename = (): string => 'posthog-init.js'
+const getLanguage = (): string => 'javascript'
+
+export const JSConfigBuilder: React.FC = () => {
+    return (
+        <ConfigBuilder
+            toggle={{
+                label: 'Where is PostHog hosted?',
+                options: [
+                    { value: 'us-cloud', label: 'US Cloud' },
+                    { value: 'eu-cloud', label: 'EU Cloud' },
+                ],
+                defaultValue: 'us-cloud',
+            }}
+            checkboxes={[
+                {
+                    id: 'useDefaults',
+                    label: 'Use recommended defaults',
+                    description: 'Sets defaults to the latest recommended behaviors',
+                    defaultValue: false,
+                },
+                {
+                    id: 'enableAutocapture',
+                    label: 'Enable autocapture',
+                    description: 'Automatically capture clicks, form submissions, and other interactions',
+                    defaultValue: true,
+                },
+                {
+                    id: 'spaMode',
+                    label: 'Single-page app (SPA)',
+                    description: 'Detect page changes via history API instead of page loads',
+                    defaultValue: false,
+                },
+                {
+                    id: 'enableSessionRecording',
+                    label: 'Enable session recording',
+                    description: 'Record user sessions for replay',
+                    defaultValue: true,
+                },
+                {
+                    id: 'recordConsoleLogs',
+                    label: 'Record console logs',
+                    description: 'Include browser console logs in session recordings',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+                {
+                    id: 'enableHeatmaps',
+                    label: 'Enable heatmaps',
+                    description: 'Capture click positions for heatmap visualizations',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+                {
+                    id: 'enableSurveys',
+                    label: 'Enable surveys',
+                    description: 'Load the surveys script to show surveys to users',
+                    defaultValue: true,
+                    group: 'advanced',
+                },
+                {
+                    id: 'maskAllText',
+                    label: 'Mask all text (privacy)',
+                    description: 'Replace all text content with asterisks in autocapture and recordings',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+                {
+                    id: 'maskAllAttributes',
+                    label: 'Mask all element attributes (privacy)',
+                    description: 'Remove all element attributes from autocapture data',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+                {
+                    id: 'optOutByDefault',
+                    label: 'Opt users out by default (GDPR)',
+                    description: 'Require explicit opt-in before tracking',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+                {
+                    id: 'crossSubdomainCookie',
+                    label: 'Cross-subdomain cookies',
+                    description: 'Share identity across subdomains (enabled by default)',
+                    defaultValue: true,
+                    group: 'advanced',
+                },
+                {
+                    id: 'secureCookie',
+                    label: 'Secure cookies only (HTTPS)',
+                    description: 'Only send cookies over HTTPS connections',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+                {
+                    id: 'alwaysCreateProfiles',
+                    label: 'Always create person profiles',
+                    description: 'Create profiles for all users, not just identified ones (identified_only by default)',
+                    defaultValue: false,
+                    group: 'advanced',
+                },
+            ]}
+            inputs={[
+                {
+                    id: 'apiKey',
+                    label: 'Project token',
+                    type: 'text',
+                    defaultValue: '<ph_project_token>',
+                },
+                {
+                    id: 'persistence',
+                    label: 'Persistence method',
+                    description: 'How to store user identity',
+                    type: 'text',
+                    placeholder: 'localStorage+cookie (default)',
+                    defaultValue: '',
+                    group: 'advanced',
+                },
+            ]}
+            generateCode={generateCode}
+            getFilename={getFilename}
+            getLanguage={getLanguage}
+        />
+    )
+}
+
+export default JSConfigBuilder

contents/docs/libraries/js/config.mdx

@@ -2,23 +2,24 @@
 title: JavaScript web configuration
 sidebar: Docs
 showTitle: true
+hideRightSidebar: true
+contentMaxWidthClass: max-w-5xl
 ---
 
+import JSConfigBuilder from './_snippets/JSConfigBuilder'
+
 When calling `posthog.init`, there are various configuration options you can set to customize and control the behavior of PostHog.
 
-To configure these options, pass them as an object to the `posthog.init` call, like we do with `api_host`, `defaults`, `loaded`, and `autocapture` below.
+## Configuration builder
 
-```ts
-posthog.init('<ph_project_token>', {
-    api_host: '<ph_client_api_host>',
-    defaults: '<ph_posthog_js_defaults>',
-    loaded: function (posthog) {
-        posthog.identify('[user unique id]')
-    },
-    autocapture: false,
-    // ... more options
-})
-```
+Use this interactive builder to generate your `posthog.init` configuration. Select the options you need and copy the generated code.
+
+<JSConfigBuilder />
+
+### Next steps
+
+1. Copy the generated code and add it to your app where PostHog is initialized.
+2. See the [full JavaScript SDK docs](/docs/libraries/js) for more features like identifying users, capturing custom events, and using feature flags.
 
 You can also use the `posthog.set_config` method to change the configuration after initialization.
 

src/components/Docs/ConfigBuilder.README.md

@@ -0,0 +1,53 @@
+# ConfigBuilder
+
+A reusable, two-panel interactive configuration builder for SDK docs pages. Users toggle options on the left and see generated code update live on the right.
+
+## Usage
+
+```tsx
+import { ConfigBuilder } from 'components/Docs/ConfigBuilder'
+
+<ConfigBuilder
+    toggle={{ label: 'Region', options: [{ value: 'us', label: 'US' }, { value: 'eu', label: 'EU' }] }}
+    checkboxes={[{ id: 'feature', label: 'Enable feature', defaultValue: true }]}
+    inputs={[{ id: 'token', label: 'Token', type: 'text', defaultValue: '<ph_project_token>' }]}
+    generateCode={(config) => `init('${config.inputs.token}', { ... })`}
+    getFilename={() => 'init.js'}
+    getLanguage={() => 'javascript'}
+/>
+```
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `toggle` | `{ label, options, defaultValue }` | Two-option toggle (e.g., US/EU Cloud) using RadixUI ToggleGroup |
+| `select` | `{ label, options, defaultValue }` | Dropdown select for more than two options |
+| `checkboxes` | `CheckboxOption[]` | Boolean config options. Supports `group: 'advanced'` to collapse under "Show advanced options" |
+| `inputs` | `InputField[]` | Text, number, or `environment-list` inputs. Also supports `group: 'advanced'` |
+| `generateCode` | `(config: ConfigState) => string` | Generates the code snippet from current config state |
+| `getFilename` | `(selectedValue: string) => string` | Returns filename label for code block |
+| `getLanguage` | `(selectedValue: string) => string` | Returns language for syntax highlighting |
+| `optionsHeader` | `React.ReactNode` | Optional content above the config options |
+| `previewHeader` | `string` | Label above the code preview (default: "Generated configuration") |
+
+## Placeholder auto-fill
+
+The generated code renders inside `SingleCodeBlock`, which auto-replaces placeholders like `<ph_project_token>`, `<ph_client_api_host>`, and `<ph_posthog_js_defaults>` with the user's actual values (or latest defaults). Use these placeholders in `generateCode` and `defaultValue` fields.
+
+## Layout
+
+- Uses `@container` queries (not media queries) per project guidelines
+- Two-column grid at `@md` breakpoint, single column on narrow containers
+- Left panel: scrollable config options
+- Right panel: sticky code preview with reset button
+- Checkbox descriptions hidden at `@md` to save space in two-column mode
+
+## Creating a new SDK config builder
+
+1. Create a file like `contents/docs/libraries/{sdk}/_snippets/{SDK}ConfigBuilder.tsx`
+2. Define `generateCode`, `getFilename`, `getLanguage` functions
+3. Pass SDK-specific checkboxes, inputs, and toggle/select options to `<ConfigBuilder />`
+4. Import and render in the SDK's config MDX page
+
+See `contents/docs/libraries/js/_snippets/JSConfigBuilder.tsx` for a reference implementation.