OverflowLint v0.1.2

Browser-based DOM layout linter. Drops into any page — dev mode, Playwright, bookmarklet, or userscript.

Checks

Page overflowDocument wider/taller than viewport
Scroll overflowContent spilling out of containers
Text truncationText clipped by ellipsis / overflow: hidden
Covered interactivesButtons/links hidden behind other elements
Touch targetsInteractive elements smaller than minimum size
Viewport visibilityElements expected to be on-screen

Try it now

Bookmarklet

Drag to your bookmarks bar. Click on any page to run a one-off scan (loads npm latest via jsDelivr).

OverflowLint

Userscript

Auto-runs on every page via Greasemonkey / Tampermonkey / Violentmonkey. Self-updates from jsDelivr on npm release.

Install Userscript

npm

Include in your project for dev-time or CI checks.

npm install overflowlint

Install links track the latest published npm version. This site may document unreleased changes from main.

Quick start

One-off scan

import { run } from 'overflowlint'

const result = run()
// { summary: { total: 3, error: 1, warning: 2, info: 0 }, findings: [...], truncated: false }

Auto-watch (dev mode)

import { install } from 'overflowlint'

// Watches DOM mutations + resize, debounces, reports to console
const stop = install({ reportToConsole: true })

// Later, tear down:
stop()

Direct script tag (via jsDelivr)

<script type="module">
  import { install } from 'https://cdn.jsdelivr.net/npm/overflowlint@0.1.2/+esm'
  install()
</script>

Playwright

import { test, expect } from '@playwright/test'
import { checkPage } from 'overflowlint/playwright'

test('no layout errors', async ({ page }) => {
  await page.goto('https://example.com')
  const { failures } = await checkPage(page)
  expect(failures).toHaveLength(0)
})

Data attributes

AttributePurpose
data-ol-no-scrollAssert no scroll overflow on this axis (values: x, y, both, none)
data-ol-allow-scrollPermit overflow on this axis (x, y, both)
data-ol-in-viewportAssert element is visible in the viewport
data-ol-clickableMark a custom element as interactive for coverage/size checks
data-ol-min-targetMinimum touch target size in px (default: 24)
data-ol-nameFriendly name for selector output (like data-testid)
data-ol-ignoreSkip this element and its children
data-ol-no-truncateSkip text truncation check on this element

Options

const result = run({
  maxFindings: 100,     // stop after N issues (default: 80)
  tolerance: 2,         // px tolerance for overflow checks (default: 1)
  reportToConsole: false, // silence console output
})