bud.sh

Your live site,
page by page.

Pages is where Bud opens: the routes you configured beside a real browser of your running site, with hot updates and everything you can click.

Get startedPages guide

Pages

Pages

3 pages
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
Home · fieldworklocalhost:3000

    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.
    Configuration

    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.
    • Home and reloadReturn to / or load the page again.
    • 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

    Every tab
    keeps its place.

    Each tab at the top of Bud keeps its own browser tabs and history. The page you are on is part of Bud’s address, so you can link straight to it.

    • Linkable/pages/collection in Bud shows /collection.
    • Bud’s back and forwardThey follow the pages you visited.
    • Tabs in tabsWorkspace tabs each hold their own browser tabs.

    Bud’s address

    The page each one shows

    /pages/
    /pages/collection/collection
    /pages/studio/studio

    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.

    How it works

    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 start the conversation. Free, and one npm install away.

    Read the setup guide