next-turbopack-ui-tagger

Adds data-ui-id and data-ui-name attributes to JSX elements in a Next.js app that uses Turbopack.

This makes it easier to inspect something in the browser and jump back to the matching source code.

What it adds

• data-ui-id="src/components/ui/button.tsx:42:7"
• data-ui-name="Button"

data-ui-id is the JSX usage location: file, line, and column.

data-ui-name is the exact JSX element token from source code.

Examples:

• <div /> -> data-ui-name="div"
• <TabsList /> -> data-ui-name="TabsList"
• <SelectPrimitive.Trigger /> -> data-ui-name="SelectPrimitive.Trigger"

Install

npm i -D next-turbopack-ui-tagger

Next.js config

Use an environment flag so the tags are only added when you want them.

import type { NextConfig } from "next";

const enableUiMap = process.env.NEXT_PUBLIC_UI_TAGGER === "1";

const nextConfig: NextConfig = {
  turbopack: enableUiMap
    ? {
        rules: {
          "*.jsx": {
            loaders: ["next-turbopack-ui-tagger"],
          },
          "*.tsx": {
            loaders: ["next-turbopack-ui-tagger"],
          },
        },
      }
    : undefined,
};

export default nextConfig;

Run

NEXT_PUBLIC_UI_TAGGER=1 next dev

Many apps wrap this in a script:

{
  "scripts": {
    "dev:ui-map": "NEXT_PUBLIC_UI_TAGGER=1 next dev"
  }
}

How to use it

1. Open your app with UI mapping enabled.
2. Inspect an element in the browser.
3. Copy data-ui-id.
4. Paste it into VS Code or Cursor Quick Open.

Example:

src/components/ui/sliding-segmented-control.tsx:55:4

You can also open it from terminal:

code -g "src/components/ui/sliding-segmented-control.tsx:55:4"

How to read the result

• If data-ui-name is lowercase, like div or button, you are usually looking at a native DOM JSX line.
• If data-ui-name is PascalCase or dotted, like TabsList or SelectPrimitive.Trigger, you are looking at a component usage line.
• In that case, open data-ui-id first, then use your editor's "Go to Definition" on the component name if you want the implementation.

Limitations

• The loader only runs on .jsx and .tsx files.
• Files inside node_modules are ignored.
• For custom components, the attributes only appear in the final DOM if that component forwards data-* props down to a rendered element.

Notes

• This package is meant for development workflows.
• The loader transpiles the transformed file to JavaScript so Turbopack can continue parsing TSX inputs correctly.