How the Waterize Bookmarklet Works

Updated

Waterize is a bookmarklet from Water.css: a small JavaScript snippet you drag to your browser's bookmarks bar. When you click it on any page, it replaces that page's styles with Water.css, which can make a cluttered or hard-to-read site more readable. There is nothing to install — the bookmark itself is the tool.

What a bookmarklet actually is

A bookmarklet looks like a bookmark but contains JavaScript instead of a URL. Your browser runs that script against whatever page is currently open. Water.css describes Waterize as "a snippet of JavaScript that sits in your bookmarks bar," used "to make ugly websites more readable by replacing the styles with Water.css."

Two consequences follow from that design:

  • It acts on the page you are viewing, not on your own site's source files.
  • It changes only your local view. Nothing is uploaded, and the site's real files are untouched.

Setting it up

  1. Make sure your bookmarks bar is visible in your browser.
  2. Go to the Water.css site and find the Bookmarklet section.
  3. Drag the Waterize link from that section onto your bookmarks bar.
  4. Open any page you want to restyle and click the Waterize bookmark.

Expected result: the page reloads its appearance with Water.css styling applied — typically cleaner typography, simpler form controls, and a plainer table and code style.

If dragging does not work, you can create a bookmark manually and paste the bookmarklet's JavaScript as its address. The site does not document that fallback, so treat it as a general browser technique rather than a Water.css feature.

What changes on the page

Water.css is a classless stylesheet, so it styles plain semantic HTML elements rather than requiring you to add classes. When Waterize swaps in those styles, the elements it targets are the ones the stylesheet covers, including:

  • Headings, paragraphs, and other typography
  • Form elements such as inputs, selects, and checkboxes
  • Tables, horizontal rules, and images
  • Code blocks and inline code
  • summary/details and the dialog element

Because the stylesheet is small and avoids elaborate layout rules, pages tend to stay responsive after the swap. Water.css notes it includes no fancy styles, so it remains mobile responsive as long as the page has the standard responsive viewport tag.

Limits worth knowing before you rely on it

  • It restyles, it does not repair. If a page's content is broken, hidden behind scripts, or unreadable for reasons other than CSS, Waterize will not fix that.
  • It overrides the site's own design. That is the point for readability, but it also means you lose the original look, including any layout the site depends on.
  • It is per-page and temporary. Clicking the bookmark on a new page applies it there; reloading or navigating away returns you to the site's normal styling.
  • It is a viewing aid, not a publishing step. To style your own site with Water.css, use the installation snippet in your HTML <head> instead — the bookmarklet is for other people's pages.

When to use it

Use Waterize when you land on a page whose styling makes the text hard to read and you want a quick, reversible improvement without extensions or developer tools. If you are building a simple static site and want the same look permanently, install Water.css directly rather than reaching for the bookmarklet.