Lens Web Component

The <alap-lens> custom element renders the same detail panel as the DOM lens, but uses shadow DOM for style encapsulation. Same config, same data, fully stylable via CSS custom properties and ::part().

Panel Placement

Select a compass direction to anchor the lens panel in the viewport.

Click a direction again to deselect. With no direction selected, the panel defaults to centered.

Cities & Landmarks

Inspect all landmarks, just the bridges, or parks.

By City

NYC · SF · London · Paris · Berlin · Chicago · LA · Sydney · Seattle · Portland · Tokyo · Seoul · Melbourne · Shanghai · Mumbai · Detroit

Expressions

landmark bridges · parks outside NYC · NYC + SF combined · everything

Pokémon

all Pokémon · fire type · ghost type · normal type

Stats, types, abilities, and flavor text from PokeAPI.

NASA Astronomy Picture of the Day

all NASA · galaxies · nebulae · meteors · comets

Real data from NASA's public API.

Coffee

all roasters

Fruit Data (no URLs)

Browse all fruit or just rosaceae family.

These items have no destination URL — the data itself is the content.

TV Shows

TV shows with booleans, long descriptions, and link arrays.

Options via Attributes

With close button: TV shows

Custom visit label: Mr. Robot

No copy button: coffee