slidev-addon-overflow-check

A Slidev addon that detects slides whose content overflows the slide boundary and warns you visually (a red badge in the browser) and programmatically (a console.warn message).

Built with AI-generated slides in mind: it's common to have content that silently gets clipped. This addon makes those silent cuts loud.

Install

npm i -D slidev-addon-overflow-check

Then add it to your slides.md frontmatter:

---
addons:
  - slidev-addon-overflow-check
---

Behavior

• Runs in dev mode only (stripped in production builds).
• For every .slidev-slide-content, watches size changes with ResizeObserver and rescans with MutationObserver so HMR edits are picked up automatically.
• Detection is two-step to avoid false positives from transform: scale():
  1. Fast filter: scrollHeight > clientHeight / scrollWidth > clientWidth.
  2. Precise check: walk text elements and compare getBoundingClientRect() against the container.
• When overflow is detected:
  • A red badge (⚠ Xpx over (v) and/or (h)) is shown in the top-right of the slide.
  • A warning is logged: [overflow-check] slide N: Xpx over (v).

Ignoring intentional overflow

Add data-overflow-ok to any element (or ancestor) you want the checker to skip:

<div data-overflow-ok>... content that's allowed to overflow ...</div>

License

MIT © WinterYukky