@socketscope/ui
v0.2.0
Published
SocketScope UI overlay — trigger, panel, sidebar, timeline, inspector. Drop one component into any React app.
Downloads
399
Maintainers
sathyaprakashReadme
@socketscope/ui
The DevTools overlay for SocketScope — drop one component into any React app for realtime WebSocket inspection.
Install
pnpm add @socketscope/core @socketscope/uiUsage
// 1. Patch window.WebSocket (runs once)
import { initSocketScope } from '@socketscope/core';
initSocketScope();
// 2. Drop the overlay
import '@socketscope/ui/styles';
import { SocketScopeDevtools } from '@socketscope/ui';
function App() {
return (
<>
<YourApp />
<SocketScopeDevtools />
</>
);
}Click the floating cyan pill bottom-right (or press ⌥+\) to expand the panel.
What's inside
- Events — live timeline, payload inspector with collapsible JSON
- Topology — live-derived nodes + animated packet dots (one client + one gateway per host)
- Metrics — stat cards, throughput chart, event heatmap, top events
- Replay — 5-minute scrub-back buffer with speed controls
- Settings — capture rules, buffer, filters, appearance · persisted to
localStorage
Next.js
// app/components/SocketScopeOverlay.tsx
'use client'
import { initSocketScope } from '@socketscope/core'
initSocketScope()
import '@socketscope/ui/styles'
import { SocketScopeDevtools } from '@socketscope/ui'
export default function SocketScopeOverlay() {
return <SocketScopeDevtools />
}// app/layout.tsx
import SocketScopeOverlay from '@/components/SocketScopeOverlay'
export default function RootLayout({ children }) {
return (
<html><body>
{children}
<SocketScopeOverlay />
</body></html>
)
}Add the parent of your repo (or wherever your monorepo root sits) to next.config.ts's outputFileTracingRoot if you're consuming via a workspace symlink.
License
MIT