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.
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.
-
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.
-
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.
-
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
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
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
Export the plan
Out comes a folder:
TASKS.mdordered by priority,plan.jsonwith every element’s markup, and a screenshot per task. Point an agent at it and let it work down the list.
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.
### 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.
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.
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.
- SitesOne canonical record per domain, with everything you ever took from it.
- BookmarksPages worth returning to. Paste a whole list at once, one URL per line.
- CapturesScreenshots with their annotations kept separate from the original pixels.
- SectionsReusable page regions: screenshot, HTML, styles, assets, provenance.
- ElementsButtons, inputs and cards normalized so you can compare them across sites.
- Design SystemsColors, type, spacing, radii and motion inferred into editable tokens.
- ComponentsGenerated implementations, verified against the source that inspired them.
- TemplatesWhole pages assembled from sections you collected months apart.
- ResourcesIcon sets, UI kits, fonts and repos, with licenses and package metadata.
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.mdandtokens.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.