# renderlint

> A linter for the rendered UI that opens apps in a real browser, finds visual defects, and fails the build until they are fixed.

renderlint is an open-source, MIT-licensed command-line linter for rendered web UI, published on GitHub by ngocanhnckh. It opens an app in headless Chromium, checks the rendered geometry and pixels, and reports visual defects that code linters cannot see. It is aimed at developers and AI coding agents that ship UI.

## What It Is

renderlint renders each page at phone, tablet and desktop widths (and in dark mode), sweeps the widths in between, and re-checks with longer text, bigger numbers and longer API data. Each finding includes the element, the source file where it can be mapped, an annotated screenshot and a concrete fix, in plain text an agent can act on. It exits non-zero when errors are found, so it can gate a build or CI step. The README states it works with any framework that renders in a browser, including React, Next.js, Vue, Nuxt, Svelte, Astro, Angular, WordPress and plain HTML.

## What It Catches

The README lists 48 rules. They cover text overflow and clipping, low contrast measured from real pixels, overlapping elements, and chart label collisions. They also cover menus hidden behind other content, emoji used as icons, leaked placeholder text such as `undefined` or `NaN`, broken images, form control misalignment, native `alert()`/`confirm()` dialogs, and accessibility basics like focus indicators and tap targets.

## Loading states and the UX pass

By default, renderlint holds each page's API requests for a second and flags areas that stay blank or content that jumps. The `--ux` option clicks buttons, tabs, links and forms on each page. It reports clicks with no feedback, unreported failures (answered with HTTP 500), double submits, dead controls and long freezes. Write requests are answered with a mock response and never reach the server.

## Pages, roles and agent workflow

Routes are read from framework source and the running router, with dynamic routes filled in and a coverage report giving each route a status. Pages behind a login can be checked with token storage, mocked APIs, a login form or roles. The `init` command adds config, a build gate, AGENTS.md instructions, Claude Code skills and a Stop hook. Integrations include a Vite plugin with a live overlay, Playwright Test, Storybook, GitHub-format PR annotations and a programmatic API.

## Limitations to know

The README documents that canvas charts cannot be inspected, that `--ux` checks at most 12 controls per page and does not use hover menus or drag and drop, and that server mocks are Node only.

## Features
- 48 rules for rendered UI defects
- Checks at phone, tablet and desktop widths plus dark mode
- Width sweep from 320 to 1920px
- Stress tests with longer text, long words, bigger numbers and longer API data
- Pixel-based contrast measurement
- Annotated screenshots with element, source file and fix hints
- Loading-state and layout-shift detection
- -ux pass that clicks buttons, tabs, links and forms
- Route discovery across major frameworks with coverage report
- Authenticated page checks with token, login form, mocks and roles
- Dropdown and menu obscuring checks
- WordPress and Elementor support
- Vite plugin with live dev overlay
- Claude Code Stop hook and agent skills
- Playwright and Storybook integration
- JSON, Markdown and GitHub annotation output formats
- Programmatic API

## Integrations
Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI, Windsurf, Aider, Zed, Amp, Vite, Playwright, Storybook, GitHub Actions, WordPress, Elementor, Next.js, Nuxt, SvelteKit, Astro, Angular, React Router, Remix

## Platforms
WEB, API, DEVELOPER_SDK, CLI

## Pricing
Open Source

## Version
0.2.0

## Links
- Website: https://github.com/ngocanhnckh/renderlint
- Documentation: https://github.com/ngocanhnckh/renderlint/blob/master/docs/getting-started.md
- Repository: https://github.com/ngocanhnckh/renderlint
- EveryDev.ai: https://www.everydev.ai/tools/renderlint