Case Studies RenderLens: capturing pages as screenshot and HTML
RenderLens: capturing pages as screenshot and HTML
TL;DR A screenshot shows what a page looked like; the raw HTML shows what it was made of. RenderLens captures both together, so a saved page is useful for research and archiving later. The work is grabbing a faithful screenshot and the underlying markup at the same moment.
Saving a web page usually means one of two lossy things: a screenshot that you cannot search, or a bookmark to a URL that might change tomorrow. RenderLens saves both the picture and the source at once, so a captured page is genuinely useful later.
The problem
When you collect pages, for research, a project, or a record, you want two things that are usually captured separately. You want to see what the page looked like, and you want the underlying content so you can search it and pull data out. A screenshot gives you the first and none of the second. Saving the HTML gives you the second but not a faithful picture. And a plain bookmark gives you neither if the page changes.
The approach
The idea is to capture both forms of the same page, at the same moment.
- The rendered screenshot preserves the visual state: layout, images, the page as you saw it.
- The raw HTML preserves the structure and content you can search and extract from.
Capturing them together, reflecting the page's actual rendered state at save time, is what makes the record complete.
What shipped
RenderLens captures every page you choose in two forms, a rendered screenshot and the raw HTML, ready for research and archiving. A saved page is no longer a fragile bookmark; it is a record you can both look at and mine for data later.
What I learned building it
The lesson was that "capture the page" is deceptively vague. Modern pages assemble themselves as you interact, so a faithful capture means grabbing the rendered state at the right moment, not the initial markup the server sent. Getting the screenshot and the HTML to describe the same page, the one the user actually saw, was the real work.
RenderLens is one of my browser tools. The full set is in the Chrome extensions section of the site.
FAQ
Why capture both a screenshot and the HTML?
They answer different questions. The screenshot preserves how the page looked, including layout and images. The HTML preserves the underlying content and structure, which you can search and extract from. Together they are a far more complete record than either alone.
What is this useful for?
Research, archiving, and evidence. If you gather pages for a project, a two-form capture lets you both see the page as it was and pull data out of it later, without going back to a URL that may have changed or disappeared.
Does it capture the page as I see it?
That is the goal: capture the rendered state at the moment you save, so the screenshot and HTML reflect the page you were actually looking at, including content that loaded dynamically.