Näkijä (Seer) — Responsive Review Canvas

What is Näkijä? It loads a website into desktop, tablet and mobile frames on one zoomable canvas. Pick a site from the preset menu (or type a URL up top), then use Compare Mode to view a Local and a Live version side by side. Drag to pan, scroll to zoom. Seeing a blank frame? Some sites refuse to load inside another page (their X-Frame-Options / CSP security policy). That is the site's own setting, not a Näkijä bug, and it does not mean anything is broken. Step 2 below (Option C) has the one-click fix.

3-Step Setup Tour

1️⃣

Set Target URLs Enter your Local Dev URL (e.g. localhost) and Live URL in the top header. Press enter to load both.

2️⃣

Cross-Origin Bypass Setup If Local/Live have different domains, browser security blocks inspection and sandbox styles. Bypass it with:

Option A (Browser bypass): Click Inspector and copy the PowerShell command to run Chrome with web-security disabled.
Option B (Helper script): Paste the copied 1-line JS bridge script into your website code during development.
Option C (Refused to Connect / X-Frame-Options): If a site blocks loading inside iframes, install the "Ignore X-Frame-Headers" Chrome/Firefox extension.

3️⃣

Build & Fix with AI Click Copy AI Context to feed your current coordinates to Antigravity, or write override styles in AI Prototyper and copy the proposal directly!

4️⃣

Save & Group Presets (Folders) Save your URL setups as presets (💾 or Ctrl+S). Use Folder / Name format (e.g. Client A / Dev) to group them into folders. Select a preset and save with the same name to overwrite/edit it.

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.

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, so it's ready to paste straight into an AI chat.

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 & Style Prototyper

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

Shortcut	Description
`?`	Toggle this Help Center Sidebar
`1`/`2`/`3`	Toggle Desktop / Tablet / Mobile cards
`L`	Compare Mode: Live Only
`B`	Compare Mode: Both (Compare)
`O`	Compare Mode: Local Only
`Ctrl+S`	Save Preset
`R`	Reset zoom and layout flow translates
`Esc`	Close Focus view / exit modal dialogs

Feedback & Bug Reports

Found a bug or have a suggestion? Fill in this quick form to generate a pre-filled email draft to the developer.

Topic:

Message:

NÄKIJÄ SEER

Desktop 1440 × 900

Local

Live

Tablet 768 × 1024

Local

Live

Mobile 393 × 852

Local

Live

NÄKIJÄ HELP CENTER

3-Step Setup Tour

Feature Guide

Keyboard Shortcuts

Feedback & Bug Reports