bud.sh

Every page of your site,
always current.

Every route side by side, captured from your dev server in light and dark at every viewport. Compare branches, walk through flows and browse the live site, all next to the conversation about it.

Get startedCanvas guide

Demo canvas

Loading 3 routes…
fieldwork®
THOUGHTFUL OBJECTS. EVERYDAY LIVING.

A little less.
A little more meaning.

Objects made to be lived with. Slowly considered, naturally imperfect.

Made for the everyday.

Useful things, honest materials, and a little room to breathe. That’s where we begin.

fieldwork® · Objects with intention.A Bud demo project
fieldwork®
THE COLLECTION · 001

Good things.
Fewer of them.

A small collection of pieces that make a space feel like yours.

The arch01
Everyday vessel02
Quiet form03
A softer edge04
fieldwork® · Objects with intention.A Bud demo project
fieldwork®
FROM OUR STUDIO

Made with
intention.

We’re a small design studio with a simple belief: the things around us should earn their place.

Less noise. More care.

We work with natural materials, small runs, and people who care about what they make. Every piece starts with a conversation.

fieldwork® · Objects with intention.A Bud demo project

    The pages you choose.
    The app you run.

    List the routes worth reviewing in one small config. Bud shows them side by side and keeps them current while you edit, in light and dark at every viewport.

    • Real pagesUse real URLs, including dynamic ones like /collection/vase.
    • Overview and detailPan and zoom across every page, even long ones.
    • Always currentEdits land on the canvas as you save.
    Configuration

    bud.config.ts

    import { defineConfig } from '@bud.sh/app'

export default defineConfig({
  name: 'Fieldwork',
  routes: ['/', '/collection', '/studio'],
})

    1. Home

      /

    2. Collection

      /collection

    3. Studio

      /studio

    Every branch,
    captured on its own.

    Main and every branch you activate get their own screenshots, built outside your checkout on every new commit. Switch branches in the sidebar, and the canvas keeps your view.

    • Main and your branchesActivate any branch with one click.
    • On every commitEach new commit is built and captured on its own.
    • Pins that followComments find their element on any branch.
    Branches

    Branches

    fieldwork

    Working treeYour edits, live
    maina3f91c2 · 6 pages
    dev/fw-k3p-give-the-home-headlineCapturing 4 of 6
    autumn-collectionWaiting for its build

    See what changed,
    page by page.

    Compare any two sets of screenshots and see only what differs, side by side with the changes outlined. Step through every change as a slideshow, without a build running.

    • Side by sideThe other set on the left, yours on the right.
    • Only what differsPages that didn’t change step out of the way.
    • A slideshowEvery change at full width, one at a time.
    Differences

    Compare with main

    2 of 3 pages changed

    /Changed
    /collectionChanged
    /studioNo differences

    Flows,
    step by step.

    Screens only clicking reaches, like a booking, show up too. Your script walks the flow, and Bud pictures every step at every viewport, right after the home page.

    • Every step a pageComments, differences and the slideshow work on steps.
    • Every viewportDesktop and phone, in light and dark.
    • Nothing gets bookedRequests you block stop the walk instead.
    Flows

    bud/flows/booking.ts

    export async function walk({ page, step }) {
  await page.getByRole('button', { name: 'Book' }).click()
  await step('offers')
  await page.getByRole('button', { name: 'Add traveller' }).click()
  await step('travellers')
}

    Your live site,
    one click from every route.

    Pages is where Bud opens: your routes beside a real browser of your running site, with hot updates, tabs and history on your own origin.

    Pages guide

    The routes you chose.
    The site you run.

    The sidebar lists every route in your configuration. Click one to open it in the browser beside it, or hold Ctrl/⌘ to open it in a new tab.

    • The real pageServed by your dev server, with hot updates.
    • Find a pageSearch the list by title or path.
    • Browser tabsKeep several pages open side by side in tabs.

    Pages

    3 pages · localhost:3000

    A browser
    that stays on your site.

    Back, forward, reload and home work like any browser. The address bar takes a path or a full URL, and only ever opens pages on your own site.

    • Its own historyBack and forward follow the page, link by link.
    • Linkable/pages/collection in Bud shows /collection.
    • On your siteAddresses elsewhere are not opened.

    Address bar

    What you type, where it goes

    /studioOpens /studio
    localhost:3000/collectionOpens /collection
    example.comStays where it is

    Your pages,
    in their own frame.

    During development Bud adds a small script to your pages. Inside Bud’s browser it reports which page is showing and carries out back, forward and reload; outside a frame it does nothing.

    The bridge

    Messages between Bud and the page

    bud:helloBud asks the page where it is
    bud:locationThe page reports its path and title
    bud:backBud’s back button goes back in the page
    bud:forwardAnd forward again
    bud:pickBud asks your picker for an element to comment on
    bud:pickedThe page answers with the element and its source
    bud:pick-cancelBud ends a pick in progress

    Sandboxed frames

    Pages load on your site’s own address.

    Nothing from Bud

    Your pages never receive Bud’s data or access.

    Development only

    Your build and Bud’s screenshots are unaffected.

    Give your next change
    a little Bud.

    Add Bud to Vite, pick a few pages and leave the first comment. Agents take it from there, and it’s free, one npm install away.

    Read the setup guide