Describe your site, and watch Whittle build it in real code you own.

Every change shows its cost as it runs.

Crumb & Co · 6 versions · 142 credits

Crumb & Co’s 6 versions cost 34.5, 19.5, 21.0, 4.5, 26.3 and 36.8 credits; v6 is current.

A real change on a real project

A replay of a real change on Crumb & Co, a bakery’s site built with Whittle. The person asked: “Add a way for people to ask about celebration cakes. I want their messages to come to me.”

  1. Version 1

    A one-page site for Crumb & Co, a neighbourhood bakery that sells out by 10am. Show what's baked today, opening hours, and how to find us. Warm but not twee.

    I'll look at the template first, then build the bakery page.

    Building now: a butter-yellow and rye-brown look with chunky Bricolage Grotesque headings, a live "what's left right now" status based on the time of day, today's bake, hours, and a drawn map.

    Now the map, footer and wiring it together.

    Crumb & Co's one-page site is built. It type-checks, builds and loads without errors, and you can see it in the preview.

    The look: a butter-yellow page with dark rye-brown sections and chunky, friendly headings. The headline is "Baked at four. Gone by ten." The aim was warm without being cute, so there's no chalkboard lettering or doilies. Next to the headline is a drawn clock face with the 4am–10am window shaded and hands showing the current time.

    What's on the page:

    • Live status: a box under the headline changes with the time of day. It shows "Opens at 7am", then "Open, shelves full", "Open, going fast", "Open, nearly sold out" and finally "Closed for today". It uses the clock on the visitor's device and doesn't know what's actually left in the shop.

    • Today's bake: six everyday items plus one special for that day of the week, each with price, how many are made and when it usually sells out. Past that time, an item gets a "Probably gone" stamp. On Mondays it shows Tuesday's list instead.

    • Hours: a weekly table with today highlighted, plus a note on when to come for the best choice.

    • Find us: address, phone, directions by bus, bike and car, step-free access, and a hand-drawn map.

    Details I made up that you'll need to replace or confirm:

    • Address, phone number and menu: all invented. The address and phone are labelled as placeholders on the page, and so is the menu with its prices.

    • Hours: I picked Tuesday–Saturday 7am to 1pm (Saturday until 2pm), Sunday 8am to noon, and closed Mondays. The page also says you're closed bank holidays and the first two weeks of August.

    • Setting aside items: the page says customers can ring before 8am to have up to six items kept back until 11.

    • The map: it's a drawing, not a real map. The street names on it (Mill Lane, Orchard Street, Station Road, Hollins Park) are also invented.

    To show what's really left each morning, you'd need a simple backend you could update from your phone. I can set that up later if you want it.

    Saved asVersion 134.5 credits

    A one-page site for Crumb & Co, a neighbourhood bakery that sells out b…

    2m 05s · 5 steps
  2. Version 2

    Make the 'See what's on the shelves' button scroll smoothly to the menu, and add a short note under the hours saying the Wednesday focaccia sells out first.

    I'll check the current files first, then make both changes with the editor this time. I wrote the first version with shell commands, which meant you couldn't see each file being created.

    The log still shows the same error with the same 5:58:52 timestamp, so it's an old entry, not a new failure. I'll read the file directly to confirm.

    I've made both changes, and the site type-checks and builds cleanly.

    Smooth scrolling: The "See what's on the shelves" button now glides down to the menu instead of jumping. If someone has turned on their device's "reduce motion" setting, it goes straight there with no animation. Keyboard users also land on the menu itself, so pressing Tab continues from there.

    Focaccia note: Under the hours table there's now a short note: "Wednesdays: the focaccia sells out first, usually by 8:15am. Get there for opening if it's what you're after."

    To make that note true, I changed one thing on the menu: it used to say the focaccia lasted until 10:15am, later than anything else on Wednesday, so it now says 8:15am. The note takes its time from the menu, so if you change one, the other updates too. Tell me the real sell-out time and I'll put it in.

    The only error the check reported was a leftover entry in the log from partway through my edits; I confirmed the finished files are fine.

    Saved asVersion 219.5 credits

    Make the 'See what's on the shelves' button scroll smoothly to the menu…

    45s · 14 steps · 5 files
  3. Version 3

    Add a small 'Birthday cakes' section just above Find us: we take cake orders by phone, two days ahead, and list three flavours.

    I'll check how the page is put together, then add a cakes section.

    That edit didn't change anything. I'll add the phone number at the top of the data file instead.

    Now I'll point Find us at the shared number.

    I've added a Birthday cakes section just above Find us, and the site type-checks and builds cleanly. It's on a light flour-coloured band so it doesn't blend into the yellow sections around it.

    It says you bake celebration cakes to order and that people should phone at least two days ahead during opening hours. There's a dark button that calls the shop when tapped on a phone, and three flavours are listed down the side: brown butter & vanilla, dark chocolate & sour cherry, and lemon & elderflower.

    The flavours are made up and labelled as placeholders on the page, so send me your real three. I left out prices and sizes because I didn't want to invent them. The phone number is also still a placeholder. It's now stored in one place and used by both the cakes section and Find us, so when you give me the real number it only needs changing once.

    The cakes section isn't in the menu at the top of the page yet. I can add a "Cakes" link there if you'd like people to find it quickly.

    Saved asVersion 321.0 credits

    Add a small 'Birthday cakes' section just above Find us: we take cake o…

    40s · 10 steps · 4 files
  4. Version 4

    Add a 'Cakes' link to the top menu that jumps to the Birthday cakes section.

    I'll check the header's current links, then add Cakes in page order.

    I've added a "Cakes" link to the top menu, between Hours and Find us so the menu follows the order of the page. Clicking it takes you to the Birthday cakes section. The site type-checks and builds cleanly.

    The top menu links use the browser's own smooth scrolling. Some preview frames ignore that and jump straight to the section, which is what the "See what's on the shelves" button used to do. If any menu link jumps for you, I can give the whole top menu the same reliable smooth scroll as that button.

    Saved asVersion 44.5 credits

    Add a 'Cakes' link to the top menu that jumps to the Birthday cakes sec…

    14s · 3 steps · 1 file
  5. Version 5

    can u change the colors

    You didn't say which colours, so I'll pick a new direction and you can steer from there. First I'll check where colours are set: most come from one theme file, but a few are written straight into components.

    One pairing, the softer green on apricot, came in just under the accessibility minimum (4.48 against the 4.5 needed for small text). I'll darken that green slightly and check it again.

    Every pairing passes now. I'll apply the colours in the theme, and also swap the pink "Probably gone" stamp for a pale apricot one, since pink on green looked out of place.

    You didn't say which colours you wanted, so I picked a new look: deep bottle green, like an old painted shopfront, with a warm apricot, the colour of a well-baked crust. It's in the preview now, and the site type-checks and builds cleanly.

    The green replaces the dark brown, and the apricot replaces the butter yellow as the page background and for the buttons and highlights. The cakes section stays a pale flour colour, and the "sold out" label on the clock stays red. I also changed a few smaller details to match:

    • The "Probably gone" stamp on the menu is pale apricot now instead of pink, which looked odd against the green.

    • I softened the park on the map so it still reads as a park.

    I checked every text colour against its background, and all of them meet the standard accessibility minimum for readability. One softer green was slightly too faint at first, so I darkened it a little.

    If this isn't what you had in mind, say so and I'll switch it. I can go back to yellow and brown, or try something else, like navy and cream or a deep plum with pale pink. You can also name your own colours, for example the colours of your shopfront or bags.

    Saved asVersion 526.3 credits

    can u change the colors

    55s · 8 steps · 3 files
  6. Version 6

    Add a way for people to ask about celebration cakes. I want their messages to come to me.

    I'll add an enquiry form to the Birthday cakes section and set it up so messages go to your inbox. First I'll check the current files.

    Next I'll describe the enquiry data so Whittle can store it and email you.

    The data setup is ready. Now the form itself, as its own component.

    Now I'll put the form into the cakes section and update the wording around it.

    Three of those edits didn't go through because I left out a required setting, so the form isn't on the page yet. Redoing them now.

    Next I'll check that the form rejects an empty message. A rejected message isn't saved, so this test won't leave anything in your inbox.

    I've added an "Ask about a cake" form to the Birthday cakes section, below the flavours. Sent messages are saved in your Data panel under "Cake enquiries", and Whittle emails you each time one comes in. The site type-checks and builds without errors.

    What the form asks for: name, email and their question are required. Phone, the date they need the cake and a flavour are optional. The date picker won't offer anything sooner than two days away, to match your notice period. If something's missing or wrong, the problem shows next to that field. After sending, people see a thank-you saying you'll reply by email and the cake isn't booked until you've confirmed it.

    One thing I couldn't check: when I tried sending a test message from my side, the address the form sends to wasn't reachable. That's likely because the preview handles those messages, not the server I can reach. So please send a real test message from the preview and check that it shows up in your Data panel. If it doesn't arrive, tell me and I'll look into it.

    Good to know:

    • Phone ordering stays as it was; the form is for questions. The note under the call button now says orders are confirmed by phone.

    • The preview and your published site keep separate inboxes. Test messages you send now won't appear on the live site, and the form only collects real enquiries once you publish.

    • If you change the three cake flavours, I'll also update the form's flavour choices to match.

    Site data

    • Add Cake enquiries
    • Anyone can send to Cake enquiries. Only you can see, change or delete them.
    Saved asVersion 6current36.8 credits

    Add a way for people to ask about celebration cakes.

    1m 11s · 17 steps · 4 files
Starts a project of your own.
Crumb & Co at v6, 1280 px wide, scrolled to the cake enquiry form

A real change on a real project. 17 steps · 1m 11s · 36.8 credits · saved as v6. Shown 10× faster.

Every change is priced, saved and reversible. You see the cost while it runs, failures on our side are refunded, going back is free, and the code is yours to download.

From the first message to the site

“A one-page site for Crumb & Co, a neighbourhood bakery that sells out by 10am. Show what's baked today, opening hours, and how to find us. Warm but not twee.”

The first message for Crumb & Co. 5 changes later:
Crumb & Co’s site on a desktop screen.
Desktop, 1440
Crumb & Co’s site on a phone.
Phone, 390

6 versions · 142 credits

What every change comes with

  1. You see what every change costs.

    Each change shows its price in credits while it runs and after it lands. One credit is one US cent of model cost. Every change stops at 250 credits, so nothing runs away with your balance.

    The editor’s credit meter during a change: 23.9 credits so far on this change, 1,446 credits in the balance, and the composer’s gauge showing 23.9 of the 250-credit stop.

  2. You don’t pay for our mistakes.

    If a change fails because of us (a sandbox crash, a provider outage), the credits go back to your balance automatically. You don’t have to ask.

    A real change that failed, as its receipt shows it: “This change didn’t finish.” It cost 0.0 credits.

  3. It’s your code.

    A standard Vite, React and TypeScript project with its full git history. Download it whenever you like and run it anywhere.

    The project as a download, crumb-co-v6.tar.gz: a Vite and React project with its own files, and a git history with one commit for every version, the latest “Add a way for people to ask about celebration cakes.”.

    Download .tar.gzIncludes the full git history
  4. Going back is free.

    Every change is saved as a version. Restoring one costs nothing and is itself a new version, so you can always undo the undo.

    Crumb & Co at v3, 1280 px wide, scrolled to the Birthday cakes section
    v3 · Add a small 'Birthday cakes' section just above Find us: we take cake o…

100 free credits a month. No card needed.

See pricing

Sketch$0 · 100 credits
Maker$20 · 1,000 credits
Workshop$60 · 3,500 credits

Start with 100 free credits a month.

Every change shows its cost as it runs.

Enough to build and refine a first site.