Canvas

Every configured route is an artboard showing a full-page screenshot of your actual app, sharp enough to read at any zoom. All canvas tools live in the toolbar at the top.

Tool	Use it to
Pan	Move around the canvas.
Light / Dark	Show every page in its other color scheme.
Top only	Show only the top of each page, or all of it.
Comment	Place a pin and start a conversation.

The refresh button beside an artboard's label captures that page again, and spins while the page is being updated. To use a page, open it in your browser.

Screenshots are plain images, and the canvas draws only what you can see: zoomed out, each page is a small picture of itself; zoomed in, only the parts of a page on screen load at full size. A site with hundreds of long pages stays as quick to move around as a small one.

How pages stay current

Bud opens each route in a headless Chromium at 1440px wide, or at each of your viewports, once per color scheme, with reduced motion so animations don't change the picture. Whenever a page changes, Bud fingerprints what it renders, its markup and styles, and only takes a new screenshot when the fingerprint is new:

• With Vite, its hot updates reach those pages like any other tab, so the canvas follows your edits within a moment. The refresh icon of each page Vite updates spins until its new screenshot lands, or until Bud finds nothing changed.
• With the CLI, Bud reloads the pages when project files change.

Bud keeps up to 10 pages open at once, counting each color scheme and viewport, and loads and captures only a couple at a time, so a large site doesn't slow your machine down. On a larger canvas every page is still captured in turn, and the pages beyond that keep their last screenshot until you press their refresh button.

Screenshots are kept by fingerprint in node_modules/.cache/bud/previews, and your browser keeps the ones it has shown. Undo an edit and the page shows its earlier screenshot at once; reload the canvas and it paints straight away; restart Bud and unchanged pages appear without being captured again.

While a page is captured for the first time, its artboard shows a loader. If it can't be captured, the artboard says why, with Try again and Open page. Bud uses the Chromium installed for Playwright, or your installed Google Chrome; without either, run npx playwright install chromium.

Set the screenshot density, color schemes and screen sizes in your configuration with previews.scale, previews.themes and previews.viewports.

Flows

Screens only clicking reaches, such as a booking, show as flows: your script walks the flow and Bud pictures every step, at every viewport. A flow's steps form one group right after /, in order, each labelled with its step's title. Each walk starts fresh from the flow's start page; a step it didn't reach says why. Comments, differences and the slideshow work on steps as on any page.

Viewports

With more than one viewport configured, such as desktop and mobile, the toolbar has a button for each and one that shows them all. Showing all puts every page's viewports side by side, each artboard labelled with its width. Comments belong to the viewport they were made on, so a comment on the phone layout only shows on phone artboards. Differences compare each viewport on its own.

Branches

The sidebar beside the canvas lists your working tree, which follows your edits live as above, then main and the branches you activated, then the repository's other branches. Choose one to see its screenshots; the canvas keeps your view.

• main is always captured. Activate any other branch with its + button, and stop with the eye button.
• When a branch gets a new commit, Bud builds that commit outside your checkout, captures every route, and replaces the branch's screenshots. The sidebar shows the commit they show, or what is happening: waiting, building, capturing with a count, or why a capture failed.
• Branch screenshots keep working after their build stops: every screenshot is saved with a map of the elements it shows, so comments on a branch find the element under the click, and pins follow their elements, without the branch running.

Set the main branch and how branches are built in your configuration.

Differences

The compare button in the toolbar shows only what differs between the screenshots you're looking at and another set: main by default, or the working tree while you look at main. Pick any other captured set from the Compare with menu.

• Each page that changed shows as two artboards side by side, the other set on the left and yours on the right, made of just the parts that differ, with the changed columns outlined. Pages that didn't change are left out, and the status line counts them.
• Sections one side adds or removes show on their own; the content they push down isn't flagged as changed.
• The play button steps through every change, one at a time, at full width. Use ← and → to move and Esc to close.
• The comparison runs in your browser. Bud compares the saved screenshots, so neither set's build has to be running. Comments are off while comparing.

Moving around

Drag or scroll to pan. Hold Ctrl/⌘ while scrolling, or pinch, to zoom around the pointer. Fit brings every route back into view.

With the canvas focused:

Key	Action
+ / -	Zoom in or out
0, F, Home	Fit all routes
Arrow keys	Pan

Bud remembers the view per project in your browser. It isn't part of your comments.