Morrit

fastestway to navigateyour react codebase

Morrit is a compile-time React Inspector that lets you jump from any rendered element directly to its source code in one click. Built for React and Next.js applications of any size.

Introducing morrit Prompts

Stop describing which button you meant. Pick the element on screen, write the change, and Morrit hands your agent an exact prompt with the file and line already in it.

localhost:3000

claude · your coding agent

claudeOpus 5$0.00

▸ Hero.tsx▸ App.tsx

waiting for a prompt…

❯esc interrupt · shift+tab to switch modes

01Select

Click any element in your running app.

02Describe

Say what should change, in plain language.

03Hand off

Paste the prompt into your coding agent.

How to install ?

Install the library

Choose your package manager and install the inspector:

npm install morrit

Add the plugin

Configure the plugin in your vite.config.ts file:


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import morrit from 'morrit/vite-plugin'

export default defineConfig({
  plugins: [
    react(),
    morrit({
      rootDir: __dirname,
    }),
  ],
  optimizeDeps: {
    include: ['morrit'],
  },
})

Add the inspector

Import and mount the MorritInspector component in App.tsx:


import { MorritInspector } from 'morrit'

function App() {
  return (
    <>
      {/* your app */}
      <MorritInspector />
    </>
  )
}

Toggle the inspector with the floating icon on the bottom right, then click any element to open its source.