fixdog

Turn live UI edits into reviewable GitHub pull requests

Quick Start

The easiest way to set up fixdog is using the CLI:

npx fixdog init

The CLI will:

Detect your framework (Vite or Next.js)
Prompt for your project ID (get it from app.fix.dog)
Automatically inject the fixdog script into your project
For Vite projects: Update vite.config.ts/js/mjs to add projectId.fix.dog to allowedHosts

Non-interactive Mode

For CI/CD or automation:

npx fixdog init --projectId your-project-id --yes

CLI Options:

--projectId, --project-id, -p - Project ID (non-interactive mode)
--yes, -y - Skip confirmation prompt
--silent, -s - Silent mode (no output except errors)
--help, -h - Show help message

Manual Setup

If you prefer to set up manually, see the integration guide or visit fix.dog for detailed documentation.

Vite

Add to your index.html inside <head>:

<script type="module">
  if (import.meta.env.DEV) {
    import(
      "https://unpkg.com/fixdog/dist/fixdog.esm.js?projectId=your-project-id"
    );
  }
</script>

Also update your vite.config.ts (or .js/.mjs) to add the project host to allowedHosts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: ["your-project-id.fix.dog"],
  },
});

Next.js App Router

Add to your app/layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {process.env.NODE_ENV === "development" && (
          <script
            type="module"
            src="https://unpkg.com/fixdog/dist/fixdog.esm.js?projectId=your-project-id"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js Pages Router

Add to your pages/_document.tsx:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        {process.env.NODE_ENV === "development" && (
          <script
            type="module"
            src="https://unpkg.com/fixdog/dist/fixdog.esm.js?projectId=your-project-id"
          />
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Configuration

Query Parameters

Parameter	Required	Description
`projectId`	Yes	Your Fixdog project ID (get from app.fix.dog)

Example:

https://unpkg.com/fixdog/dist/fixdog.esm.js?projectId=my-project

For more configuration options and API details, visit fix.dog.

Troubleshooting

Source not available: Ensure dev/build has _debugSource (development or React Refresh). Production builds often strip it.
Next.js / RSC: Server Components don't have client-side fibers; ensure the inspected component is a client component.
Plain HTML element: No React fiber → nothing to log.
Iframes / shadow DOM: Inspector stays within the current document; shadow hosts are walked, but cross-iframe is skipped.

Requirements

React 16.8+ through React 19
Works with Next.js (App Router and Pages Router) and Vite
Only runs in development mode by default

Getting Your Project ID

Visit app.fix.dog to create a project and get your project ID.

Documentation

For detailed documentation, examples, and advanced usage, visit fix.dog.