breakpoint-overlay: a TypeScript library that displays a persistent developer overlay showing active responsive breakpoints, viewport dimensions, and device pixel ratio.
Key features include real-time viewport tracking with configurable debouncing, customizable keyboard shortcuts that work across international layouts, expandable details panel showing all breakpoint states, and Shadow DOM encapsulation to prevent style conflicts.
The library weighs under 5KB and works with any framework.
Perfect for debugging responsive layouts without constant DevTools toggling.
Top comments (0)