I Rebuilt Remio in 12 Minutes — Here's the Prompt

The tool we rebuilt

Remio sits in an interesting category — visual note-taking with web capture. It's positioned somewhere between Milanote (visual moodboards) and Notion (structured knowledge bases). You clip web content (articles, screenshots, video frames) onto a freeform canvas where you can arrange items spatially, draw connections, and group related material.

The pitch is sensible: human memory is spatial, not list-based. When you're researching a topic, you remember "the thing that was top-left near the blue article" better than "item 47 in my linear note list." Remio leans into this with a visual-first interface.

Pricing is $12/month for Premium. The free tier limits the number of canvases and items per canvas. Premium removes most caps and adds collaborative features.

The interesting question for the rebuild: can a Chrome extension replicate the canvas-based capture experience without a backend? Mostly yes, with one tradeoff — the canvas itself has to live in chrome.storage, which means it's local-only (no cross-device sync without additional infrastructure). For users who work primarily on one machine, that's fine. For users who need cross-device, Remio's value holds.

What I built

A Chrome extension that adds a "Capture to Canvas" button to any webpage. Clicking it opens a quick-capture popup with auto-extracted screenshot preview, editable title, tag selector, and an optional note field. Saves the captured item to a visual canvas (rendered as a dedicated extension page) where items can be arranged spatially via drag-and-drop, connected with lines, and grouped into clusters.

Took 12 minutes to build. The canvas rendering is the most complex part — using HTML5 canvas + draggable absolute-positioned divs gets you 80% of the way there. The remaining 20% (smooth zoom, connection drawing, infinite canvas) is more work.

Output: Manifest V3 extension with about 380 lines of code across 6 files (manifest, content script, popup, canvas page HTML/CSS/JS, background worker). No external dependencies — vanilla JS for the canvas.

The prompt I used

A few notes:

Screenshot via captureVisibleTab. Chrome provides this API specifically for extensions to grab the current viewport. Using it (instead of HTML2Canvas-style libraries) is faster, higher quality, and works on any page including those with Canvas/WebGL content.

The "Save with selection" mode matters for usability. Full-viewport screenshots are noisy — you get the whole page including ads, navigation, sidebars. Letting the user drag-select a specific region produces cleaner captures.

Canvas zoom and pan are explicitly in the prompt because they're the difference between a usable visual workspace and an unusable one. Without zoom, you can't see overall structure when you have 100+ items. Without pan, you can't navigate. Built in from the start.

Local storage cap. chrome.storage.local has a 10MB default limit. Screenshots are big. Storing 100 high-resolution screenshots will exceed the cap. The rebuild compresses screenshots to lower resolution (max 800px wide) on save and uses the unlimitedStorage permission. With these, the canvas can hold thousands of items.

How it works

Content script handles capture. It listens for the floating button click, then either:

1. For full-viewport capture: calls chrome.runtime.sendMessage with { type: 'CAPTURE_VIEWPORT' }. The background worker uses chrome.tabs.captureVisibleTab to get a screenshot data URL.

2. For region capture: injects a transparent overlay that lets the user drag-select a rectangle. On release, captures just that region (uses canvas to crop the viewport screenshot to the selected rectangle).

The captured screenshot, page title, URL, and any user-added title/tags/notes get saved to chrome.storage.local with this schema:

{
  id: 'item-12345',
  title: 'How Chrome extensions work',
  url: 'https://example.com/article',
  screenshot: 'data:image/png;base64,...',  // compressed to ~800px wide
  tags: ['chrome-extensions', 'tutorial'],
  notes: 'Useful intro to MV3 architecture',
  position: { x: 320, y: 240 },  // canvas position
  createdAt: '2026-06-08T14:32:00Z'
}

Connections between items are stored separately:

{
  id: 'connection-789',
  fromItemId: 'item-12345',
  toItemId: 'item-67890',
  label: '',  // optional connection label
  createdAt: '2026-06-08T14:35:00Z'
}

Canvas page is where the real work happens. It loads all items and connections from chrome.storage.local on open, then renders:

• Each item as an absolutely-positioned div with the screenshot thumbnail
• Connections as SVG lines between the centers of connected items
• A floating toolbar at top for filter/search/zoom/export controls

The canvas uses CSS transforms for zoom and pan (transform: scale(zoom) translate(panX, panY) on a container div). This is faster than re-rendering everything on each interaction.

Drag-and-drop uses HTML5 drag events (or pointer events for finer control). When an item is dragged, its position updates in chrome.storage.local in real-time (debounced to avoid hammering storage).

Connection drawing works by: click the connect icon on item A → cursor changes to crosshair → click item B → SVG line drawn between them, connection saved to storage.

Background worker is minimal — handles the captureVisibleTab calls and Notion API sync (if configured).

Popup HTML is the quick-capture UI (200 lines including the region-select overlay code). The canvas page is about 250 lines of vanilla JavaScript.

That's the entire extension. No React, no canvas library, no external dependencies. Vanilla HTML/CSS/JS keeps it fast even with hundreds of items on the canvas.

Cost breakdown

Remio Premium at $12/month vs PlugThis Starter at $29/month. The headline price is higher.

Where the rebuild tilts:

No usage caps. Remio's free tier limits canvases and items per canvas. The rebuild has no caps (subject to chrome.storage.local quota with unlimitedStorage permission — practically unlimited for thousands of items).

Marginal cost is zero. If you're already on PlugThis Starter for another extension, adding this one is free. Remio stays at $12/month.

No service dependency. Remio is a service — if they shut down, your canvases go with them. The rebuild's data lives in chrome.storage.local. Works as long as Chrome exists.

Cross-device tradeoff. Remio syncs across devices and supports collaboration. The rebuild is single-device single-user. If you switch between Mac and Windows or share canvases with teammates, Remio's value is real.

For solo desktop users who want a visual capture tool with permanent ownership, the rebuild's math holds even at the higher headline price. For teams or cross-device users, Remio's subscription is reasonable.

Side-by-side feature comparison

The collaboration and cross-device gaps are real. If you work across devices or need to share canvases with teammates, Remio's subscription value is genuine. If you work primarily in Chrome on one machine, the rebuild covers the experience well.

Customization ideas

Multiple canvases. Add support for separate named canvases (Project A / Project B / Inspiration). Each has its own item set and layout. Switch between canvases via dropdown.

Auto-arrange layouts. Buttons to auto-arrange items: grid layout, force-directed layout (items related by tags cluster), chronological timeline.

AI clustering. Use GPT-4 to suggest groupings based on item content. "These 12 items all relate to attention economics — group them?" One API call per canvas, ~$0.10. Optional.

Drag-from-tab capture. Drag any tab from Chrome's tab bar onto the canvas to capture it. More intuitive than the floating button for power users.

PDF support. Capture PDF pages as canvas items. Requires the pdf.js library bundled.

Video frame capture. On YouTube or video pages, capture a specific frame with timestamp link. Useful for video research.

Markdown export per item. Right-click any item → "Export as Markdown." Convert the captured page (re-extracted via Readability) to Markdown for use in Notion/Obsidian.

Timeline view. Alternative to canvas view — chronological timeline of all captures. Useful for retrospectives.

Each is a small addition. The base infrastructure handles them.

Try it yourself

Drop the prompt into PlugThis, load into Chrome. The canvas page opens via chrome-extension://[id]/canvas.html — you can pin this as a bookmark for fast access.

For users who want the cross-device sync gap closed, the path is: replace chrome.storage.local with a Supabase backend. About 30 minutes of additional engineering for users who want it.

Related reading

• Remio alternatives — structured comparison — competitor analysis
• I rebuilt Liner in 11 minutes — list-based alternative to visual canvas
• I rebuilt Notion Web Clipper — structured saves to Notion databases
• The complete Chrome extension building guide — extension architecture explained

The Remio rebuild is the most visually interesting in the series — a working canvas in vanilla JS. For solo desktop researchers, it covers the experience at higher headline cost but permanent ownership. For users who need cross-device or collaboration, Remio's subscription holds its value.