Free - open source - MIT licensed

Beautiful 404 pages in one line of JavaScript.

RJLCustom404 is a free, zero-dependency script that turns an empty 404.html into a finished, on-brand error page: your images, your colors, a way home. Include it, call it, ship it - no build step, no framework, no CSS to write.

Paste before </head>

html

<script src="https://rjl.codes/error/404/custom404.js?v=RJL_1.3.0"></script>
<script>RJLCustom404({ imgFileNames: ["/img/404.png"] });</script>

Open the playground Read the docs Star on GitHub

Dependencies: 0
Minified: 18.6 KB
Options, all optional: 27
Built-in phrases: 200

Runs the 404 page on 300+ hostnames.

The RJLCustom404 robot holding a broken link, standing on a browser window under a 404 tag

Three steps. No build.

Every site has a 404 page. Most are the server's default, or a blank page someone meant to fix later. This makes it a 30-second job.

1 Include the script

Hosted on rjl.codes, or copy the file to your site.

html

<script src="https://rjl.codes/error/404/custom404.js?v=RJL_1.3.0"></script>

2 Call the function

Pass only the options you care about. Everything else has a sane default.

html

<script>
  RJLCustom404({
    imgPattern: "/img/404-{n}.png",
    imgCount: 4,
    autoText: true
  });
</script>

3 Ship 404.html

Put it at your site root. Most hosts pick it up automatically.

text

Cloudflare Pages / Netlify / Vercel / GitHub Pages:  /404.html
Apache:  ErrorDocument 404 /404.html
nginx:   error_page 404 /404.html;

Full setup guide for every host

Every part is one option.

This is the whole page it renders. Each piece maps to one option name, so there is nothing to learn beyond the four labels.

Example 404 illustration: a cartoon astronaut — `imgPattern` or `imgFileNames` - a random image from your set, or a bracketed placeholder when none is configured.

`headerText` - the heading. `headerTextPosition` puts the text right of the image, left of it, or on top.

`subHeaderText` - the optional line under the heading.

`btnDisplayText` - the button, or a plain link with `actionIsBtn: false`. It and the image both go to `homeUrl`.

Not pictured: `pageTitle` sets the browser tab, `bodyBackgroundColor` and `bodyFontColor` color the page, and `autoText` writes any text you leave blank. The layout stacks on small screens. Exact markup: DOM structure.

All 27 options

Everything a 404 page needs. Nothing it does not.

Zero dependencies

One 18.6 KB file. No framework, no stylesheet, no build step.

One function call

RJLCustom404({...}) renders the title, heading, sub-heading, image and button.

Your images, your brand

Point it at your own files. Random pick each visit, no repeats, remembered per visitor.

autoText

200 built-in phrases across title, header, sub-header and button. Or write your own.

27 options, all optional

Colors, layout, radius, hover shadow, button or link, pulse count, home URL.

Responsive by default

Side by side on desktop, stacked on phones. Nothing to configure.

Works on any host

Cloudflare Pages, Netlify, Vercel, GitHub Pages, Apache, nginx, IIS, Express.

Nothing phones home

No network calls except your images. localStorage only, no cookies.

Try a preset.

This is the real library rendering inside a real document, not a mock-up. Pick a preset, then open it in the playground to change anything.

404 - Not Found https://your-site.com/this-page-does-not-exist

Open this preset in the playground

Any host that can serve a 404.html.

Cloudflare Pages Netlify Vercel GitHub Pages Apache nginx IIS Express

Static or dynamic, it does not matter. The library runs in the browser.

Let it write the copy.

Turn on autoText and any text you did not set is filled from four pools of 50 phrases: page title, header, sub-header, button. Shuffled, no repeats until the pool is exhausted, remembered per visitor. Set a field yourself and it always wins.

javascript

RJLCustom404({ autoText: true });

Read all 200 phrases

A few of them

Plot twist: the page was inside you all along.
We sent a search party. They got lost too.
Try turning the URL off and on again.
Beam me up!

Short answers.

The three questions everyone asks first. Twelve more on the FAQ page.

All questions

Is it really free? Can I use it commercially?

Yes. RJLCustom404 is released under the MIT license and costs nothing to use on personal or commercial sites. There is no paid tier and no registration.

Does it phone home or track my visitors?

No. The library makes no network requests other than loading the images you configure. It uses localStorage to remember which images and phrases a visitor has already seen, sets no cookies, and sends nothing anywhere.

Does it work with React, Next.js, Vue or Astro?

Yes. Any framework that can output a static 404.html works unchanged. Frameworks that own the 404 route, such as the Next.js app router not-found page or a Nuxt error page, can load the script and call RJLCustom404() when that route mounts.

Your 404 page could be done before this page finishes loading.

Copy the snippet, add your images, put the file at your site root.

html

<script src="https://rjl.codes/error/404/custom404.js?v=RJL_1.3.0"></script>
<script>RJLCustom404({ imgFileNames: ["/img/404.png"] });</script>

Open the playground Read the docs Star on GitHub