Like ESLint, but for your rendered UI. Renderlint detects horizontal overflow, covered buttons, tiny touch targets, and other structural bugs that slip through code review.

rlint check http://localhost:3000

❌ OVERFLOW Horizontal overflow detected (page scrolls 740px beyond viewport)
   └─ Element: div.hero-banner
   └─ Fix: Add overflow-x: hidden or check for elements with fixed widths

❌ CLICKABILITY Interactive element is covered by another element
   └─ Element: button.submit-btn
   └─ Covered by: div.modal-backdrop
   └─ Fix: Check z-index or remove covering element

⚠️  TOUCH-TARGETS Touch target too small: 32x28px (min: 44x44px)
   └─ Element: a.nav-link
   └─ Fix: Add min-width: 44px and min-height: 44px

──────────────────────────────────────────────────
Results: 2 errors, 1 warning, 47 passed
──────────────────────────────────────────────────

The Problem

Layout bugs are invisible in code review. Your PR looks fine, tests pass, but then:

The page scrolls horizontally on mobile
A modal backdrop covers your buttons
Touch targets are too small for actual fingers

These aren't styling issues — they're structural bugs that can be detected programmatically using getBoundingClientRect(), getComputedStyle(), and elementFromPoint().

Installation

npm install rlint

No extra setup. Renderlint uses your system Chrome — no 150MB Chromium download. If Chrome isn't installed, Chromium is downloaded automatically on first run.

Note: The first run may be slower if Chromium needs to be downloaded (~150MB). Subsequent runs use the cached browser.

Quick Start

# Check any URL
npx rlint check https://example.com

# Check your dev server
npx rlint check http://localhost:3000

# Check multiple viewports (mobile + desktop)
npx rlint check --viewport 375x667,1920x1080 http://localhost:3000

# Auto-detect framework and start dev server
npx rlint dev

Checks

Check	Severity	What it catches
`overflow`	error	Horizontal scrollbars from content wider than viewport
`clickability`	error	Buttons/links covered by other elements (z-index bugs)
`touch-targets`	warning	Elements smaller than 44×44px (WCAG 2.5.5)
`visibility`	warning	Interactive elements that are invisible or off-screen
`text-overflow`	warning	Text clipped without proper ellipsis handling

Framework Support

Renderlint auto-detects your framework and handles hydration:

# Auto-detect and start dev server
npx rlint dev --routes /,/about,/contact

# Specify framework manually
npx rlint dev --framework nextjs --routes /,/api/health

Supported: Next.js, SvelteKit, Vite, Remix, Astro, Nuxt, Create React App

Library Usage

import { checkPage } from 'rlint';
import { launchBrowser } from 'rlint/browser';

const browser = await launchBrowser();
const page = await browser.newPage();
await page.goto('http://localhost:3000');

const results = await checkPage(page);
console.log(results.summary);
// { passed: 47, errors: 1, warnings: 2 }

await browser.close();

MCP Server (for AI Agents)

Renderlint includes an MCP server for integration with Claude Code and other AI tools:

{
  "mcpServers": {
    "rlint": {
      "command": "npx",
      "args": ["rlint-mcp"]
    }
  }
}

Available tools:

check_page — Check a URL for layout issues
check_html — Check raw HTML content
check_file — Check a local HTML file
screenshot — Take a screenshot (returns image for visual debugging)

Configuration

// rlint.config.js
export default {
  checks: {
    overflow: { horizontal: true },
    touchTargets: { minWidth: 44, minHeight: 44 },
    clickability: { checkCorners: true },
    textOverflow: { allowEllipsis: true },
  },
  ignore: ['.tooltip', '[data-rlint-ignore]'],
};

Ignoring Elements

<!-- Skip specific elements -->
<input type="checkbox" data-rlint-ignore>

CI Integration

# .github/workflows/rlint.yml
name: Renderlint Check
on: [push, pull_request]

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run build
      - run: npm start & npx wait-on http://localhost:3000
      - run: npx rlint check --fail-on warning http://localhost:3000

Tip: Renderlint uses system Chrome. If unavailable, Chromium is downloaded to ~/.cache/rlint on first run. Cache this directory in CI for faster builds.

CLI Reference

rlint check <urls...>
  -v, --viewport <size>      Viewport size (e.g., 375x667,1920x1080)
  -f, --format <format>      Output: text, json, junit
  -o, --only <checks>        Run specific checks only
  -i, --ignore <selectors>   Ignore matching elements
  -c, --config <path>        Config file path
  --fail-on <severity>       Exit code 1 on: error, warning
  --headed                   Show browser window
  --wait-for-hydration       Wait for SPA hydration

rlint dev
  -r, --routes <routes>      Routes to check (default: /)
  -p, --port <port>          Dev server port
  --framework <name>         Framework override
  --no-start-server          Use existing dev server

How It Works

Renderlint doesn't compare screenshots. Instead, it queries the DOM:

// Overflow detection
document.documentElement.scrollWidth > document.documentElement.clientWidth

// Covered element detection
document.elementFromPoint(x, y) !== expectedElement

// Touch target detection
element.getBoundingClientRect().width < 44

These checks are deterministic, fast, and don't require human review.

Why Not Visual Regression?

Visual regression (screenshot comparison) catches everything but requires human review for every change. Renderlint catches structural bugs that are objectively wrong:

Visual Regression	Renderlint
Catches color changes	Catches layout bugs
Requires baseline images	No baselines needed
Needs human review	Fully automated
Slow (image comparison)	Fast (DOM queries)

Use both! Visual regression for design fidelity, Renderlint for structural correctness.