DevTools

The retend-web-devtools package provides an in-app overlay for inspecting the component tree, viewing props, and highlighting rendered UI regions.

Features

• Component Inspector: View the application's component tree.
• Props Viewer: Inspect the props passed to a component.
• DOM Highlighting: Highlight the DOM elements corresponding to components in the devtools tree.
• Component Search: Find components by name in the component tree.
• Customizable Interface: Select the inspector's highlight colors.

Installation

Install the devtools as a development dependency:

npm install -D retend-web-devtools

Usage

Wrap the application root with the <RetendDevTools> component to use the devtools.

In development, retend-web-devtools enables the full devtools build. In production, it resolves to a no-op component.

Client-Side Rendered (CSR) Apps

Import the component and wrap the application root:

import { renderToDOM } from 'retend-web';
import { RetendDevTools } from 'retend-web-devtools';
import App from './App';

const root = document.getElementById('app')!;

renderToDOM(root, () => (
  <RetendDevTools>
    <App />
  </RetendDevTools>
));

Server-Side Rendered (SSR) / Hydration

If you are using retend-server with hydrate, use the wrap option:

import { hydrate } from 'retend-server/client';
import { createRouter } from './router';
import { RetendDevTools } from 'retend-web-devtools';

hydrate(createRouter, {
  rootId: 'app',
  wrap(root) {
    return <RetendDevTools>{root}</RetendDevTools>;
  },
});