ViewLint rules run on the rendered page (not your source code).

This page documents the rules shipped in @viewlint/rules.

Use the built-in rules

import { defineConfig } from "viewlint/config";
import rules from "@viewlint/rules";

export default defineConfig({
  plugins: {
    rules,
  },
  extends: ["rules/recommended"],
});

Related: Configure Rules

If you’re not sure where to start, keep rules/recommended enabled and only override rules when you have a clear reason.

Presets

rules/recommended

The rules/recommended preset is the default starting point. It focuses on high-signal issues that usually indicate real bugs or strong UX problems.

It enables:

• Rule rules/hit-target-obscured (Error)
• Rule rules/clipped-content (Error)
• Rule rules/container-overflow (Error)
• Rule rules/overlapped-elements (Error)
• Rule rules/text-overflow (Error)
• Rule rules/text-contrast (Warn)
• Rule rules/unexpected-scrollbar (Error)

rules/all

The rules/all preset is useful when you want more feedback while polishing a UI. It includes everything in rules/recommended, plus:

• Rule rules/corner-radius-coherence (Warn)
• Rule rules/misalignment (Warn)
• Rule rules/space-misuse (Warn)
• Rule rules/text-proximity (Warn)
• Rule rules/text-ragged-lines (Warn)

Rule reference

All rules in @viewlint/rules currently take no options. If a rule reports an issue, you fix the UI; if you need to suppress something intentionally, use data-viewlint-ignore.

rules/hit-target-obscured

Detects interactive elements that are significantly covered by another element (hard to click).

rules/clipped-content

Detects content clipped by overflow: hidden / overflow: clip.

rules/container-overflow

Detects elements that overflow their parent container.

rules/overlapped-elements

Detects layout overlaps between large, normal-flow elements.

rules/unexpected-scrollbar

Detects small “almost invisible” scrollbars (usually a 1–20px overflow bug).

rules/text-overflow

Detects text that visually extends outside its container.

rules/text-contrast

Detects low-contrast text using screenshot-based sampling.

rules/corner-radius-coherence

Detects nested corner radii that look visually inconsistent.

rules/misalignment

Detects sibling elements in flex layouts that look like they were meant to align but are slightly off.

rules/space-misuse

Detects containers with irregular or wasteful empty space around content.

rules/text-proximity

Detects horizontally adjacent text blocks that are too close together.

rules/text-ragged-lines

Detects awkward ragged/widowed lines in multi-line text blocks.

Suppressing rules

To ignore a subtree of the DOM, use data-viewlint-ignore:

<div data-viewlint-ignore="rules/text-contrast">...</div>

Use data-viewlint-ignore="all" to suppress all rules inside that subtree.