Paintless
Latest
/Pipeline

Source Mapping

How a clicked element resolves to a file and line, per bundler.

Build mappers annotate rendered elements with data-paintless-source="file:line:column" during dev, so the picker can hand the agent an exact location instead of a description. Only host elements are annotated — components never receive unknown props.

Vite (React / JSX)

import { paintlessMapper } from '@paintless/mapper-vite'

export default defineConfig({
  plugins: [paintlessMapper(), react()],
})

Dev-serve only by default; pass { build: true } to keep annotations in production builds.

build: true publishes your source layout: every annotated element carries its file path and line, readable by anyone who opens devtools on the deployed site, and the component trail exposes your component names. That is the point in prod mode — a reporter's request is worth far more with file:line in it — but decide it deliberately. Without it, requests from production still work; the agent locates the element from its markup and component trail instead.

webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: ['@paintless/mapper-webpack'],
      },
    ],
  },
}

Next.js

// next.config.mjs
import { withPaintless } from '@paintless/mapper-next'

export default withPaintless({
  // your Next config
})

Wires the webpack loader into dev builds and chains any webpack hook you already have. (Turbopack/SWC builds are not annotated yet — the fallback below covers them.)

Vue SFC

import { paintlessVueMapper } from '@paintless/mapper-vue'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [paintlessVueMapper(), vue()],
})

Annotates plain elements in <template> blocks with file-absolute positions; components, slots, and non-HTML templates (pug) are skipped.

No mapper? The fallback

Without annotations (production sites, unsupported bundlers), requests still work: the agent receives the selector path, component trail, element HTML and computed styles, and locates the code by searching the repository. Mapping makes it faster and more precise; it is never required.

Edit this page

Last updated: