Skip to main content

Timeline

Visualize state changes over time with an interactive timeline view.

Overview​

The Timeline component provides a chronological view of all state changes in your application, making it easy to understand the sequence of events and debug issues.

API​

import { Timeline } from 'react-dev-debugger';

<Timeline
  maxEntries={100}
  showTimestamps={true}
  groupByComponent={false}
  onSelect={(entry) => console.log(entry)}
/>

Basic Example​

import { Timeline, useTrackedState } from 'react-dev-debugger';

function App() {
  const [count, setCount] = useTrackedState('count', 0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <Timeline />
    </div>
  );
}

Live Playground​

Interactive Components

Counter Component
Count: 0
Todo List Component
Total: 0 todos
Timeline Configuration
<Timeline
  maxEntries={100}
  showTimestamps={true}
  groupByComponent={false}
  onSelect={(entry) => {
    console.log(entry);
  }}
/>

Timeline

No timeline entries yet. Interact with components above.

Timeline Features:

  • Chronological event display
  • Component-based filtering
  • Detailed action information
  • Timestamp for each entry

Features​

  • Chronological View: See all state changes in order
  • Time Stamps: Precise timing of each change
  • Component Grouping: Group changes by component
  • Search & Filter: Find specific changes
  • Expandable Details: View full change information

Next Steps​