Import and mount#
import { JevDevtools } from "jev-devtools";
export function Root() {
return (
<>
<main>Your application</main>
<JevDevtools enabled={import.meta.env.DEV} defaultOpen={false} />
</>
);
}Mount the inspector once near your application root. It connects after mounting when enabled; it renders nothing during SSR.
<JevDevtools enabled defaultOpen={false} />- enabled
- Load and connect the browser inspector. Defaults to false; enable the server adapter separately.
- defaultOpen
- Whether the drawer starts expanded. Defaults to true; false starts at the launcher.
- endpoint
- Same-origin inspector path. Defaults to /api/jev-devtools; must match the server adapter.
- redactAdditionalSensitiveData
- Mask supported personal fields in the display. Does not remove captured data. Unreleased; defaults to true.
Load and connect the browser inspector. Defaults to false; enable the server adapter separately.
enabledWhether the drawer starts expanded. Defaults to true; false starts at the launcher.
defaultOpenAPI reference: JevDevtools
Example walkthrough: import.meta.env.DEV enables the inspector in Vite development builds. defaultOpen={false} starts at the launcher, so users open the drawer when they need it. The component is a sibling of the application's main content.
Rendered output#
| Value | Type | Description |
|---|---|---|
| Component return | React element or null |
Nothing during SSR or while disabled; the connected inspector after mounting when enabled. |
Mount once near the application root. The component is safe to import during SSR: it renders nothing until mounted and enabled. Its launcher and drawer render into a Shadow DOM boundary under document.body.
Props#
| Prop | Type | Default | Behavior |
|---|---|---|---|
enabled |
boolean |
false |
Opt in to loading and connecting the inspector. |
endpoint |
string |
/api/jev-devtools |
Same-origin adapter path. Must match the server. |
defaultOpen |
boolean |
true |
Initial expanded state; set false to start at the launcher. |
redactAdditionalSensitiveData |
boolean |
true |
Unreleased. Mask supported personal fields in the display. Does not remove captured data. |
JevDevtoolsProps is exported from jev-devtools for component wrappers. Production disabling is a runtime opt-in policy, not a promise that every bundler removes inspector assets.
Styles#
The drawer injects its own stylesheet. You do not need an import. The jev-devtools/styles.css public export remains available for compatibility with existing integrations. Page selectors cannot reach the shadow tree; do not depend on host CSS to customize drawer internals.
Document-level transforms, clipping, and page JavaScript can still affect the host. Shadow DOM is style encapsulation, not a security boundary.
Lifecycle#
Closing preserves selection, filters, and view state while incoming traces continue to update history. The panel first mounts on opening when defaultOpen is false. Disabling or unmounting disconnects the component; it does not stop independent server capture.
Browser-safe types#
Trace, Snapshot, StreamSnapshot, TraceDelta, Json, AnswerView, and QuestionView are exported from the root entry point. They describe captured protocol data, which may be redacted or truncated. See recorder and types for advanced integrations.
Fixture export (unreleased)#
The root entry also exports browser-safe flowFixture, FlowFixture, and BuiltFlowFixture. See building a fixture for parameters, missing captures, and masking behavior. These exports are not in npm 0.4.1.