Skip to main content

Timeline View

Display state changes in an interactive timeline format.

Overview​

The Timeline View component visualizes state changes chronologically, making it easy to understand the sequence of events in your application.

API​

import { TimelineView } from 'react-dev-debugger/ui';

<TimelineView
  maxEntries={100}
  showTimestamps={true}
  groupByComponent={false}
  filterComponents={['App', 'TodoList']}
  onEntryClick={(entry) => console.log(entry)}
/>

Basic Example​

import { TimelineView } from 'react-dev-debugger/ui';

function DebugPanel() {
  return (
    <div>
      <h2>State Timeline</h2>
      <TimelineView maxEntries={50} showTimestamps={true} />
    </div>
  );
}

Features​

  • Chronological Display: See changes in order
  • Time Stamps: Precise timing information
  • Component Grouping: Group by component
  • Filtering: Focus on specific components
  • Expandable Entries: View detailed information
  • Search: Find specific changes

Customization​

<TimelineView
  theme={{
    entryBackground: '#1e1e1e',
    entryBorder: '#333',
    timestampColor: '#888',
    componentColor: '#10b981',
  }}
  formatTimestamp={(ts) => new Date(ts).toLocaleString()}
  renderEntry={(entry) => (
    <CustomEntryComponent entry={entry} />
  )}
/>

Live Playground​

Timeline Controls

Total: 3Filtered: 3

Timeline View

Counter15:30:45.123
state
UserForm15:30:43.456
state
TodoList15:30:40.789
props

TimelineView Usage Example

import { TimelineView } from 'react-dev-debugger/ui';

function DebugPanel() {
  return (
    <TimelineView
      maxEntries={100}
      showTimestamps={true}
      groupByComponent={false}
      filterComponents={['Counter', 'TodoList']}
      onEntryClick={(entry) => console.log(entry)}
      theme={{
        entryBackground: '#1e1e1e',
        componentColor: '#10b981',
        timestampColor: '#888',
      }}
    />
  );
}

Next Steps​