@devtoolsoverlay/overlay

An on-page devtools overlay for debugging NEST webapp without a chrome extension.

Simply add the call the overlay function and get access to a powerful, in-browser devtools experience during.

Try it online!

🚧 TODO 🚧 A couple of deployed demo websites where you can see the Overlay in action: 🚧 TODO 🚧

• Sandbox Website - Source code

Getting started

Installation

npm i @devtoolsoverlay/overlay
# or
yarn add @devtoolsoverlay/overlay
# or
pnpm add @devtoolsoverlay/overlay

Attach the overlay

Simply call the overlay component in the client entry file.

import { attachDevtoolsOverlay } from '@devtoolsoverlay/overlay'

attachDevtoolsOverlay()

// or with some options

attachDevtoolsOverlay({
  defaultOpen: true, // or alwaysOpen
  noPadding: true,
})

Using the Vite plugin (recommended)

Instead of manually calling attachDevtoolsOverlay in your application code, you can use the Vite plugin to automatically inject the overlay during development. The overlay will only be active when running the dev server — it is never included in production builds.

// vite.config.ts
import { defineConfig } from 'vite'
import { devtoolsOverlay } from '@devtoolsoverlay/overlay/vite'

export default defineConfig({
    plugins: [
        devtoolsOverlay(),
        // or with options:
        // devtoolsOverlay({ defaultOpen: true, noPadding: true }),
    ],
})

The plugin accepts the same options as attachDevtoolsOverlay:

| Option | Type | Description | |---------------|------------|--------------------------------------------------| | defaultOpen | boolean | Open the overlay by default on first visit | | alwaysOpen | boolean | Keep the overlay always open (no toggle button) | | noPadding | boolean | Remove padding from the overlay container | | modules | Module[] | Custom modules/tabs to add to the devtools |

Extending with custom tabs/modules

Custom tabs can be added to the devtools by passing the parameter modules to the overlay function.

With react

import { attachDevtoolsOverlay } from '@devtoolsoverlay/overlay'
import { render, hydrate } from 'react';

attachDevtoolsOverlay({
  modules: [{
    title: 'tab name',
    MainView: ({ openSidePanel }) => (
      <>
        <h2>
          This is the main view
        </h2>
        <div>
          <button onClick={() => openSidePanel(b => !b)}>
                  Open side panel
          </button>
        </div>
      </>
    ),
    SidePanel: () => (
      <div>
        <h3>This is the sidepanel</h3>
      </div>
    ),
    render: (Component, el) => render(<Component/>, el),
  }]
})

With solidjs

import { attachDevtoolsOverlay } from '@devtoolsoverlay/overlay'
import { render } from "solid-js/web";

attachDevtoolsOverlay({
  modules: [{
    title: 'tab name',
    MainView: ({ openSidePanel }) => (
      <>
        <h2>
          This is the main view
        </h2>
        <div>
          <button onClick={() => openSidePanel(b => !b)}>
                  Open side panel
          </button>
        </div>
      </>
    ),
    SidePanel: () => (
      <div>
        <h3>This is the sidepanel</h3>
      </div>
    ),
    render: (Component, el) => render(<Component/>, el),
  }]
})

Changelog

See CHANGELOG.md.