Nisaba

v1.0 A desktop browser · macOS · Windows · Linux

Browse.
Capture.
Compound.

You find a pricing section you love. You screenshot it. Three months later you own a folder of 4,000 PNGs and no idea where any of them came from. Nisaba is the browser that fixes that.

Public service announcement Not an everyday browser. Open it when your library needs to grow. Wink.

Two cartoon fox spies in trench coats tugging a browser window between them
Fox vs. Fox — the eternal struggle over one good hero section.
A cartoon fox detective buried in an avalanche of unlabeled screenshots
Exhibit A: the screenshots folder.

The problem

A screenshot is a souvenir, not a source.

A PNG remembers what something looked like. It forgets the URL, the font stack, the grid, the spacing scale, the hover state and the library that built it. Everything that would let you actually use it again is the part your screenshot tool throws away.

  • Where did this come from?
  • What font is that, really?
  • How was that grid put together?
  • Did I already save this one twice?

How it works

The caper, in three panels.

Browse like normal. Nisaba quietly keeps the evidence.

  1. A fox spy photographing a website with an oversized flash camera
    Panel one

    1 Capture

    Viewport, full page, a dragged region or a single element. Annotate with arrows, blur and callouts — stored as editable vectors, so the original pixels stay untouched. Source URL, title, viewport and timestamp ride along automatically.

  2. A fox spy lifting a pricing card out of a webpage with tweezers
    Panel two

    2 Extract

    Hover the page and the DOM outlines itself. Click a section and Nisaba keeps its sanitized HTML, matched CSS, computed styles, custom properties, fonts, assets and accessibility tree — plus a selector that still finds it later.

  3. A fox spy cranking a machine that turns a website section into printed code
    Panel three

    3 Convert

    Hand a saved section to Claude Code or Codex — the CLI you already have installed. Out comes a component in React, Tailwind, shadcn/ui, Next.js or plain HTML, previewed side by side with the original so you can send corrections back.

Genericized by default: layout theory in, someone else's branding and copy out. You are stealing the idea, not the trade dress.

The other half

Audit a page. Hand it to an agent.

Nisaba is not only for stealing good ideas — it is also for fixing your own pages. Open your site, live or on localhost, and click your way down it.

  1. 1

    Click what is wrong

    Every click pins a numbered note to that exact element. Type what needs fixing, set a priority, tag it — spacing, copy, colour, accessibility, whatever it is.

  2. 2

    Nisaba finds it in your code

    Each pin keeps its selector, its computed styles and a screenshot — then greps your workspace for the test id, text or class name it carries and tells you which file probably renders it, with a confidence score.

  3. 3

    Export the plan

    Out comes a folder: TASKS.md ordered by priority, plan.json with every element’s markup, and a screenshot per task. Point an agent at it and let it work down the list.

Nisaba in audit mode: a localhost page with the review panel open on the right

Reviewing a localhost page. The panel on the right is where the notes go — it cannot live in the page, because the page is the thing being reviewed.

TASKS.md
### 1. [high · spacing] Heading sits too close to the subhead

- **Selector**: `html > body > section:nth-of-type(1) > h1`
  - if that misses: `h1.hero-title`
- **Element**: `<h1>` — “Ship faster with fewer meetings”
- **Likely source**: `src/components/Hero.tsx:4` — matched on class
  `hero-title` (70% confidence)
- **Box**: 792×72 at (40, 80)
- **Screenshot**: `shots/01-heading-sits-too-close.png`
- **Computed now**: `margin: 0px 0px 4px`; `font-size: 48px`
- [ ] Done

The app

A real browser, with the evidence room attached.

Nisaba in extract mode: a live page with the selection overlay active and the inspector open

Extract mode. Hover the live page, walk the DOM with the arrow keys, click to keep the region — screenshot, selector, HTML, styles, tokens and all.

The Captures library showing saved screenshots of Vercel, Stripe and Linear

And the payoff: every capture filed under its site, with the URL, dimensions and date it was taken.

The payoff

Nine kinds of evidence. One filing cabinet.

Nisaba doesn't store a pile of images. It stores typed artifacts that know about each other — so a section can tell you its site, its capture, its tokens and every component it later produced.

Local first, permanently

SQLite and plain files on your disk, in folders you pick. No account, no sync, no telemetry. Uninstalling Nisaba does not take your library with it.

Every page is a suspect

Sites run in isolated views with no Node, no preload bridge and every permission denied by default. Text scraped from a page is treated as data — never as instructions to an agent.

Your agent, your keys

Nisaba drives the Claude Code or Codex CLI you already installed and authenticated. It shows you the resolved prompt and the target folder before anything is written.

Field manual

Every screen, explained.

Fourteen destinations in the sidebar, plus three surfaces that follow you everywhere. Here is what each one is for.

Working surfaces

Home

The landing screen. One field that searches your library or takes a URL, four quick-capture actions, live counts for every library type, your recent captures and whatever the agent is currently running. Built to get you browsing in one keystroke.

Browse

The actual browser: tabs, back/forward/reload, a URL field that falls back to web search, viewport presets and the Capture / Extract / Convert toolbar. The page itself runs in an isolated native view, so it never touches Nisaba's internals.

Turning on Extract makes the page hover-selectable — arrow keys walk the DOM to the parent, child or sibling of whatever you're pointing at.

Inspector

The right-hand panel, in three tabs. Inspect shows the selection's name, screenshot, DOM summary, CSS custom properties, fonts, colors, detected dependencies and framework guesses — every detection carrying a confidence score and its evidence. Assets lists the images, icons, SVG and fonts found inside it. AI is where you choose an output profile and agent before converting.

Compare

Two captures, three ways: side by side, overlaid with an opacity slider, or as a pixel difference that paints every change in purple and tells you what percentage moved. Point it at a source reference and a later recapture to see what a site changed, or at a screenshot of what you built to see how close you got.

The difference is computed locally in a canvas, and pixel equality is never the goal — it is there to show you what moved, not to grade you.

Tasks drawer

The bottom strip. Every agent job appears here with live progress, streaming logs, cancel and retry. It survives a restart — a job that was running when the app closed gets reconciled rather than silently lost.

Command palette

⌘K from anywhere. Jump to any library, reopen any tab, or type a URL to open it in a new one. It is the fastest path between "I want to look at that" and looking at it.

Capture & organize

Audits

Every page review you have run. Each one keeps its pins — the note, the priority, the category, the element it points at and the file Nisaba matched it to — plus where the plan was exported.

Reopen the page to carry on, or export the plan again after the code has moved.

Bookmarks

Links worth keeping, with tags, collections, notes and a status. Bulk add takes a pasted list — one URL per line, schemes optional, duplicates and blank lines dropped automatically. Broken links get flagged rather than deleted.

Captures

Every screenshot you've taken, grid or table, filtered by site, tag, date or viewport. Each one keeps its source URL, page title, scale factor and scroll position, with the annotation layer stored separately so the original is always recoverable.

Sections

The good stuff: reusable page regions typed as Hero, Pricing, Navigation, Form, Testimonial, Footer and so on. A section carries its screenshot, selector, sanitized HTML, matched styles, downloaded assets, accessibility metadata and a full trail back to the page it came from.

Elements

The Element Style Matrix. Run Detect elements on a page and Nisaba finds the buttons, inputs, checkboxes, cards, badges and tables, collapses visually identical instances so you get variants rather than repeats, and works out which pseudo-class rules the page actually declares.

Each state it finds — :hover, :focus, :active — is screenshotted for real by forcing that state through the DevTools protocol, so the matrix shows what the element does, not what you assume it does.

Resources

The tools rather than the designs: icon libraries, UI kits, font collections, repositories. Classified on save with package metadata, repository links and license where they can be found, and cross-linked to every site and section that uses them.

Sites

One record per domain — favicon, notes, tags, detected technology and every capture, section and bookmark you have taken from it. Recapture later and Nisaba will show you what changed.

Build & system

Design Systems

A site's design language, extracted: color roles, type hierarchy, spacing and radius scales, breakpoints and observable motion. Exports as an editable design.md, tokens.json and site-profile.json. Observed values and inferred ones are always labeled differently — Nisaba never pretends a guess is a fact.

Components

What the agent built. Each component keeps its files, framework, preview, the exact prompt profile used, the job that produced it and the sections it came from. Every generated version is preserved, so you can roll back.

Templates

Multi-section pages. Order saved sections into an outline, choose what to keep and what to genericize, and let the agent assemble the whole thing inside a folder you nominated.

Jobs

The full history of agent runs, not just the ones currently going. Inputs, resolved prompt, adapter, streamed events, logs, output files, status and timings — kept so you can see exactly what produced a component months later.

Workspaces

A workspace is a root folder plus an output stack, prompt profile, agent and permission scope. Jobs can only write inside an approved workspace, and Nisaba shows you the command, the working directory and the permissions before the first write-enabled run.

Settings

Where your library, components and templates live on disk. Which agent CLIs are detected and authenticated. Sanitization defaults for saved HTML. Diagnostics — off unless you turn them on.

Shipped

Everything in 1.0.

The whole loop — browse, capture, audit, extract, profile, organize, convert, verify and export. Free, open source, and entirely on your machine.

Capture & understand

  • Multi-tab browsing in fully isolated views
  • Viewport, full-page, region and element capture
  • Annotation editor — arrows, blur, highlight, numbered callouts
  • Hover-to-select extraction with arrow-key DOM navigation
  • Audit reviews, matched to the files in your workspace
  • Design profiling into design.md and tokens.json
  • Element Style Matrix with real hover and focus states
  • Framework detection with confidence and evidence

Organize & build

  • Visual similarity search and duplicate detection across the library
  • Compare, by side, overlay or pixel difference
  • Agent jobs with streaming logs and a resolved-prompt preview
  • Local preview of generated output, started from the workspace
  • Lint, type, test and build checks before a component is marked verified
  • SQLite with full-text search behind every library screen
  • Portable export and import of the whole library

Everything above works today, on your own machine, with no account.

Go and grow your library.

Free, open source and MIT licensed. Installs for macOS, Windows and Linux, and updates itself from GitHub Releases.

Building from source? git clone, npm install, npm run dev. That's the whole ritual.