LogTape DevTools
A TanStack DevTools plugin that brings your LogTape logs into a dedicated, filterable panel. See everything your app is logging without leaving DevTools.
Built for LogTape & TanStack DevTools.
Live Log Stream
Watch logs appear in real time as your application runs. No more switching between browser console and your app.
Level Filtering
Filter logs by severity level — trace, debug, info, warning, error, fatal. Focus on what matters.
Category Search
Filter by category prefix and search across log messages. Find the needle in the haystack.
Structured Inspection
Click any log entry to expand and inspect the full payload, including structured properties and metadata.
Pause & Resume
Pause the live stream to inspect logs without them scrolling away. Resume when you're ready.
Bounded Memory
A configurable buffer keeps memory usage under control. Old logs are dropped automatically.
Installation
Add to your project as a dev dependency
Install logtape-devtools:
npm install -D @mugenlabs/logtape-devtoolsOr install everything at once (including peer dependencies):
npm install -D @mugenlabs/logtape-devtools @logtape/logtape @tanstack/react-devtoolsQuick Start
Two steps: configure the sink, add the plugin
Configure the LogTape sink
Add the DevTools plugin
Advanced Setup
Hold on to the store yourself, or keep React out of your logging setup
createLogTapeDevtools() is a thin wrapper over createDevtoolsSink and createLogTapeDevtoolsPlugin. Call them separately when you need a reference to the store — for a custom buffer size, isolated stores in tests, or clearing logs programmatically.
The package root pulls in React, since the panel is a React component. If your LogTape configuration is shared with a server entry point, a worker, or any non-React bundle, import from the @mugenlabs/logtape-devtools/sink subpath instead — it exports the sink, the store and the types with no React dependency.
Production
Keep the panel out of your production bundle
The panel is a development tool. Guard the mount behind a build-time flag so your bundler can tree-shake it — and @tanstack/react-devtools along with it — out of production builds.
API Reference
Exported functions and types
createLogTapeDevtools(options?)
Creates a LogTape sink and its matching DevTools plugin, both wired to the same store. Returns { sink, plugin }. This is the recommended entry point.
createDevtoolsSink(options?)
Creates a LogTape sink that forwards log records to the devtools panel. Also available from the React-free @mugenlabs/logtape-devtools/sink subpath.
createLogTapeDevtoolsPlugin(options?)
Creates a TanStack DevTools plugin config object.
createLogStore(options?)
Creates an isolated log store. Records live in a fixed-capacity ring buffer, so appending is O(1) and the oldest record is evicted once the buffer is full.
Compatibility
Requires @logtape/logtape ^2.0.0 and React 18 or 19. @tanstack/react-devtools ^0.9.0 is an optional peer dependency — you only need it to host the panel, so you can depend on this package purely for the sink via the /sink subpath. Node 24 LTS or newer.