renderlint

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.