fixdog
v0.1.16
Published
Turn live UI edits into reviewable GitHub pull requests
Readme
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 initThe 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/mjsto addprojectId.fix.dogtoallowedHosts
Non-interactive Mode
For CI/CD or automation:
npx fixdog init --projectId your-project-id --yesCLI 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-projectFor 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.