in-stride-widget

The React widget half of In-Stride. A floating holographic pill you drop into your app — click a div, jump to the JSX. Visualize every route. Leave notes. Copy a ready-to-paste prompt for your AI coding agent.

For non-vibe coders: it's a DevTools replacement that speaks source files, not CSS.

What you get

• DOM → source bridge — pin any element with the inspector, click the SRC chip, open the exact JSX in VS Code / Cursor / WebStorm / Sublime. Works without any build plugin in Vite, CRA, and Next.js dev mode.
• Route map — visual graph of every page in your app, grouped by domain.
• AUDIT — Lighthouse-style 4-axis snapshot (speed · usability · quality · ready) with a one-click prompt export.
• ASK — copy a Markdown prompt to clipboard containing your current route, pinned element, component name, source file:line, active task, and recent errors. Paste into Cursor / Claude Code / ChatGPT.
• TASK list — to-do list that threads the active task into every prompt export.
• Notes with context — save a note and Stride silently attaches route, viewport, console errors, network failures, and the pinned element.
• Mobile mode — small S in the bottom-left, hold to bloom a tree of tool branches. Centered holographic modals.
• Walkthroughs — step through a user journey and leave notes on each screen.
• Keyboard first — ⌘K to open, 1–9 to fire slots, ⌘Shift+R to reset layout, ⌘C on a pinned element to copy + start a note.

Install

npm install in-stride-widget

Peer deps (you probably already have these):

npm install react react-dom framer-motion @xyflow/react lucide-react

@xyflow/react is optional but enables the route graph. framer-motion is required for most animations.

Usage

import { StrideWidget } from 'in-stride-widget';

export default function App() {
  return (
    <>
      <YourApp />
      {import.meta.env.DEV && (
        <StrideWidget
          holoMode
          routes={[
            { path: '/', sourceFile: 'src/pages/Home.tsx' },
            { path: '/about', sourceFile: 'src/pages/About.tsx' },
          ]}
        />
      )}
    </>
  );
}

Scaffold it in one command

From any React / Next.js / Vite repo:

npx in-stride init

Writes a stride.config.ts with your routes detected from the filesystem, prints the snippet you paste into your app root. Use npx in-stride init --with-mcp to also wire up Chrome DevTools MCP so AI assistants can drive your running app.

Config

<StrideWidget
  holoMode                            // enable the new HUD (recommended)
  routes={[/* StrideRoute[] */]}
  appName="Stride Demo"               // override auto-detected title
  inspectorHotkey="Mod+Shift+E"       // default. "Mod" = ⌘/Ctrl
  annotationHotkey="F2"
  bridgeUrl="http://127.0.0.1:7819"   // optional CLI bridge (future)
  sounds={false}                      // opt-in amber click on deploy
/>

See src/types.ts for the full StrideConfig.

Positioning

In-Stride is for vibe coders — people who ship real apps with AI assistance (Cursor, Claude Code, v0, Lovable, Bolt) but don't have deep traditional CLI/editor fluency. The problem it solves: "Claude, change that button" only works if you know which file the button is in. In-Stride sits between the rendered page and the editor and removes the guesswork.

License

MIT