devlink

Click any element in your browser → jump to its source code → edit it → UI updates live.

Works with Vite, Next.js, and CRA. Fully local — no cloud, no API keys.

Install

npm install @rahul_ur/devlink
npm install -D @rahul_ur/devlink-babel-plugin @rahul_ur/devlink-vite-plugin

Setup (one command)

npx devlink setup

This automatically:

• Detects your framework (Vite / Next.js / CRA)
• Patches your vite.config.ts or .babelrc
• Creates devlink.config.ts with your project paths
• Adds devlink:bridge script to package.json

Add to your app entry

// src/main.tsx (Vite) or pages/_app.tsx (Next.js)
import { DevlinkBridge } from '@rahul_ur/devlink-bridge'
import { DevlinkStudio } from '@rahul_ur/devlink-studio'
import { devlinkConfig } from '../devlink.config'

const bridge = new DevlinkBridge()

function Root() {
  return (
    <DevlinkStudio bridge={bridge} {...devlinkConfig}>
      <App />
    </DevlinkStudio>
  )
}

Start the bridge server

Open a separate terminal and keep it running:

npm run devlink:bridge

Use it

Start your app normally (npm run dev) then:

| Action | How | |--------|-----| | Toggle inspect mode | Alt+D | | Click element → open source | Click any element | | Box select multiple | ⬚ Box button then drag | | Area capture | Hold + and drag | | Save file | Ctrl+S | | Exit inspect mode | Esc or right-click |

Vite config (manual)

If auto-setup didn't patch your config:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          devlinkBabelConfig({ root: process.cwd() }),
        ].filter(Boolean),
      },
    }),
  ],
})

Next.js config (manual)

// .babelrc
{
  "presets": ["next/babel"],
  "env": {
    "development": {
      "plugins": [
        ["@rahul_ur/devlink-babel-plugin", { "root": ".", "envs": ["development"] }]
      ]
    }
  }
}

DevlinkStudio props

| Prop | Type | Default | Description | |------|------|---------|-------------| | bridge | DevlinkBridge | required | Bridge instance | | projectRoot | string | required | Absolute path to your project root | | rootPath | string | required | Path shown in file tree (usually projectRoot/src) | | defaultDocked | boolean | false | Start editor docked to the right | | dockedWidth | number | 460 | Width of docked panel in px | | enabled | boolean | NODE_ENV=development | Disable entirely in production |

Packages

This package installs all of these automatically:

| Package | Purpose | |---------|---------| | @rahul_ur/devlink-bridge | WebSocket tunnel between browser and local filesystem | | @rahul_ur/devlink-studio | Floating Monaco editor + inspector + terminal + AI bar | | @rahul_ur/devlink-babel-plugin | Stamps data-source on every JSX element at build time | | @rahul_ur/devlink-vite-plugin | Wires babel plugin into Vite + React automatically |

How it works

Your browser app
  → clicks element
  → reads data-source="src/Button.tsx:9:4" (stamped by babel plugin)
  → sends to bridge over local WebSocket
  → bridge reads file from disk
  → editor opens file, highlights lines
  → you edit + Ctrl+S
  → bridge writes to disk
  → HMR reloads your app
  → UI updates

Everything stays on your machine. No cloud. No uploads.

License

MIT