NÄKIJÄ SEER

v1.0 Responsive Review Canvas

Project Preset

Compare Mode

Local URL

Live URL

Desktop 1440 × 900

Local

Live

Tablet 768 × 1024

Local

Live

Mobile 393 × 852

Local

Live

NÄKIJÄ HELP CENTER

What is Näkijä?

It loads a website into desktop, tablet and mobile frames on one zoomable canvas, so you can review a Local and a Live version side by side.

Blank frame? Some sites block being shown inside another page (their X-Frame-Options / CSP policy). That is the site's own setting, not a bug. See the bypass options below.

Quick start

Load two URLs

Type a Local and a Live URL up top, or pick a preset. Press Enter to load both. Local can be a dev server like http://localhost:5173 — see Previewing a local dev server below.

Compare

Switch Compare Mode between Live only, Local only, or Both side by side.

Navigate

Drag to pan, scroll to zoom, or use the bottom toolbar. Press R to reset the view.

Save presets

Press Ctrl+S to save a URL pair. Name it Folder / Name to group it into folders.

Previewing a local dev server (localhost)

Point Local at your dev server — e.g. http://localhost:5173 (or whatever port your npm run dev / Vite / server prints). Press Enter to load it.

Chrome asks to “connect to devices on your local network”? Click Allow — the preview then loads. That is Chrome's one-time Local Network Access prompt (Chrome 142+, late 2025) shown whenever a site on a public https address reaches your own machine. It is expected, not an error.

No download or HTTPS needed for localhost. http://localhost and http://127.0.0.1 load fine even though this tool runs over HTTPS — loopback addresses are exempt from the browser's mixed-content block. (Any other plain http:// host still is blocked; that is the only case where the red banner's “Download Standalone HTML” helps.)

Still blank after allowing? Check the dev server is actually running on that port, and that it isn't set to refuse being framed (some servers send X-Frame-Options / Content-Security-Policy: frame-ancestors — same as the “Blank frame?” note above).

App behind a login? A cookie session only reaches the frame when Näkijä and your app are same-site (same domain — port doesn't matter). Run Näkijä on localhost too (node scratch/serve.js → localhost:4000) and point Local at your localhost app: both are localhost, so you stay logged in inside the frames. The hosted build (a different site) only shows the login page for a localhost app.

Cross-origin & AI setup

Different domains? Browser security can block inspection and style injection across origins. Three ways around it:

A — Browser bypass: open the Inspector and copy the PowerShell command to launch Chrome with web-security disabled.

B — Helper script: paste the copied one-line JS bridge into your site's code during development.

C — Refused to connect: if a site blocks iframes entirely, install the "Ignore X-Frame-Headers" browser extension.

Build & fix with AI: click Copy AI Context to hand your current view to an AI assistant, or live-edit CSS in the AI Prototyper.

Feature guide

Diagnostics

Performance Load Diagnostics: Displays the load speed badge next to title headers (Green < 600ms, Orange < 1.8s, Red > 1.8s).

Hot Reload (Watcher): Runs recursive folder watcher. Saving files in VS Code reloads Local frames instantly.

Visual Tests & Themes

Visual Diff Mode: Overlays Local on Live using mix-blend-mode: difference. Identical spots turn pitch black; layout Shifts glow in neon colors. Auto-aligns scroll position between same-domain views while active.

Capture Canvas (AI Export): Captures all active viewports side-by-side on one high-res snapshot and copies it directly to your clipboard for AI assistant prompts.

Pixel Ruler Tool: Measure exact pixel distances straight on top of live website previews. Supports Shift-key straight line snap ($0^\circ$ / $90^\circ$), crosshairs, and persistent distance badges.

Save Screenshot: Camera icon in each device's header saves that section's current view as a clean PNG — zooms to 100% and hides all app chrome first.

Vision Simulator: Simulates color blindness (Protanopia, Deuteranopia, Tritanopia) and Grayscale conditions from toolbar.

App UI Themes: Swaps editor colors (Midnight Void, Amoled Black, Cyber Neon, Nordic Light) from top-bar dropdown.

Inspector & Dynamic Boards

Dynamic Boards (+ View): Add dynamic custom viewports to the canvas with custom resolutions and custom labels.

Outline Guides: Injects layout guide grids inside same-origin frames to diagnose boundary padding shifts.

Element Inspector: Click elements inside frames to extract classes, tags, and copy selectors formatted for AI.

Grid & Column Overlays: Draws pixel-perfect 12-column layouts or grid lines on top of the viewports to check alignment.

AI Prototyper CSS Console: Sandbox to enter custom styles, live-override local viewports, and copy proposal prompts.

Keyboard shortcuts

Key	Action
?	Toggle this Help Center
1 2 3	Toggle Desktop / Tablet / Mobile
M	Toggle Pixel Ruler (measure tool)
Shift	Hold while measuring for straight line ($0^\circ$ / $90^\circ$)
L	Compare Mode: Live only
B	Compare Mode: Both (compare)
O	Compare Mode: Local only
Ctrl+S	Save preset
Alt + ↑ ↓	Reorder presets (in the preset list; drag the grip does the same)
R	Reset zoom & layout
Esc	Exit Ruler / Focus view / dialogs

Feedback & bug reports

Found a bug or have an idea? This generates a pre-filled email draft to the developer.

Topic

Message

Element Inspector

Tag: -

Selector: -

Size: -

From view: -

Alt+click an element to inspect it — plain clicks still go to the page, so the preview stays usable. The selector is scoped to that frame's document, and the size is in the page's own CSS pixels (canvas zoom doesn't affect it). Alt+click hits the deepest element under the pointer — on an icon that is the inner <path>, not the <svg> around it, so read the selector to see where you landed.