HTTP Status Code Reference — Free HTML CSS JS Snippet

Every developer eventually forgets the exact difference between a 401 and a 403, or whether a 307 preserves the request method during a redirect while a 302 technically does not always guarantee it. This snippet is a self-contained, searchable reference table covering the full range of standard HTTP status codes from informational 1xx responses through server error 5xx responses, built entirely from a static JavaScript array with no network request and no external API — everything renders instantly and works offline.

The data model

The core of the tool is the STATUS_CODES array, where each entry is a plain object with code, name, and desc fields. Descriptions are written to be accurate and concise, summarizing the relevant RFC 9110 (and predecessor RFC 7231/2616) semantics in a sentence rather than reproducing the full specification text. Because it is just a JavaScript array, extending it with additional or custom status codes — a proprietary 499 Client Closed Request used by some proxies, for instance — is a one-line addition.

Live filtering by category and free text

render() is the single function responsible for producing the visible list. It filters STATUS_CODES against two independent conditions: the active category filter (all, or one of 1 through 5 matching the first digit of the code) and a free-text query matched case-insensitively against the code number, the name, and the description. This means typing "redirect" surfaces every 3xx code even without knowing their numbers, while typing "404" or clicking the "4xx Client Error" filter narrows immediately. Both filters combine with logical AND, so a search term and a category filter can be applied simultaneously.

Category color coding

Each row's code number gets a CSS class derived from categoryClass(), which simply takes the first character of the status code and prefixes it with c (so 404 becomes .c4). This produces the familiar color convention seen in most HTTP tooling and browser dev tools — blue for informational, green for success, amber for redirection, red for client errors, and purple for server errors — giving an instant visual read of a code's category before even reading the number.

Click-to-copy for pasting into code or documentation

Clicking any row calls navigator.clipboard.writeText() with a formatted string like "404 Not Found", useful for pasting directly into a commit message, a code comment, or an API error response body. The button briefly shows a "Copied!" confirmation and a green border via the .copied class, then reverts after 1.1 seconds. A fallback path runs the same visual confirmation even if the Clipboard API is unavailable (for example in a restricted iframe), so the interaction never silently fails.

Why this beats a static cheat sheet

A printed or static HTML table of status codes requires scanning through potentially 40 rows to find the one you want. Combining a live text filter with category buttons turns that into a two-keystroke lookup: type part of what you remember (the number, a fragment of the name, or even a keyword from the description like "rate limit" for 429) and the matching rows are the only ones left. That single interaction — search-as-you-type against multiple fields at once — is the same pattern worth reusing for any reference table where users often remember only a fragment of what they are looking for.