// BeatBake landing page // Sections wired together in . Tweaks panel exposes a few options. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#22d3ee", "heroLayout": "split", "showFeatureIcons": true, "downloadUrl": "https://github.com/ntemples1/BeatBake-Releases/releases/latest/download/BeatBake.dmg", "buyUrl": "https://beatbake.lemonsqueezy.com/checkout/buy/633c5858-30f0-4cfa-bc88-382a11b3ba35?embed=1", "ipadUrl": "" }/*EDITMODE-END*/; // Stable external links (not user-tweakable). const LINKS = { releases: "https://github.com/ntemples1/BeatBake-Releases", wiki: "https://github.com/ntemples1/BeatBake-Releases/wiki", issues: "https://github.com/ntemples1/BeatBake-Releases/issues", email: "mailto:hello@beatbake.co.uk", }; // ─── Tiny inline icons (1.5px stroke, currentColor) ──────────────────────── const Icon = { staff: (p) => , grid: (p) => , midi: (p) => , sheet: (p) => , preset: (p) => , print: (p) => , apple: (p) => , download:(p) => , book: (p) => , life: (p) => , display:(p) => , }; // ─── BeatBake logo mark (step-grid B) ────────────────────────────────────── // A 5×5 sequencer grid where the lit cells form a B. Same construction as // option 3 from the logo exploration — drawn in SVG so it scales cleanly. function Logo({ size = 28, color = "currentColor" }) { const lit = new Set([ "0,0","1,0","2,0", "0,1", "3,1", "0,2","1,2","2,2", "0,3", "3,3", "0,4","1,4","2,4", ]); const cells = 5; const pad = size * 0.18; const gridSize = size - pad * 2; const gap = gridSize * 0.07; const cell = (gridSize - gap * (cells - 1)) / cells; const tileR = size * 0.22; const rects = []; for (let row = 0; row < cells; row++) { for (let col = 0; col < cells; col++) { const isLit = lit.has(`${col},${row}`); rects.push( ); } } return ( ); } // ─── Top nav ─────────────────────────────────────────────────────────────── const NAV_LINKS = [ { href: "#features", label: "Features" }, { href: "#teaching", label: "Teaching" }, { href: "#preview", label: "Preview" }, { href: "#ipad", label: "iPad" }, { href: "#pricing", label: "Pricing" }, ]; function Nav({ buyUrl, downloadUrl, accent }) { const [open, setOpen] = React.useState(false); React.useEffect(() => { document.body.classList.toggle('menu-open', open); return () => document.body.classList.remove('menu-open'); }, [open]); // close menu if viewport grows past mobile breakpoint React.useEffect(() => { const mql = window.matchMedia('(min-width: 981px)'); const onChange = (e) => { if (e.matches) setOpen(false); }; mql.addEventListener('change', onChange); return () => mql.removeEventListener('change', onChange); }, []); return ( <>
setOpen(false)}> BeatBake v1.0 Buy licence Download
setOpen(false)}> BeatBake
{NAV_LINKS.map(l => ( setOpen(false)}>{l.label} ))}
setOpen(false)} style={{background: accent}} > Download Free Trial setOpen(false)} > Buy Licence — £17.99
Free 7‑day trial · macOS 14 or later
); } // ─── Hero ────────────────────────────────────────────────────────────────── function Hero({ accent, heroLayout, buyUrl, downloadUrl }) { const split = heroLayout === "split"; return (
v1.0 release · macOS 14+

A drum‑editor that thinks like a drummer.

Sketch a groove on the step grid. Read it back as live percussion notation. Print A4 worksheets for your students, send it to Logic Pro as MIDI, or just hit play. A focused tool for writing, teaching, and practising drum parts.

Download Free Trial Buy Licence — £17.99

Try BeatBake free for 7 days. Buy a licence when you’re ready.

  • macOS 14 or later
  • Free 7‑day trial
  • Free updates for v1.x
BeatBake — Funky 2 Bar.drumgroove
BeatBake editor showing a two-bar funk groove as live percussion notation above the step grid
); } // ─── Features ────────────────────────────────────────────────────────────── const FEATURES = [ { icon: "staff", title: "Live percussion notation", body: "Every note you place on the grid renders instantly as proper drum notation — stems, beams, dotted values, rests, triplet brackets, accents and hi‑hat marks. Ghost notes and grace notes render properly too, engraved with the Bravura music font." }, { icon: "grid", title: "Clickable step grid", body: "Write 1‑4 bars in straight, triplet or 32nd‑note grid modes. Time signatures from 2/4 to 12/8 — including 5/4, 7/8 and 5/8. Copy and paste bars across the groove to build ideas out fast." }, { icon: "midi", title: "MIDI Out & playback", body: "Route to Logic Pro or any DAW, or use the built‑in sound engine for offline practice. Loop the whole groove or play just one bar. Tap tempo, click track, and count‑ins that count odd meters properly — 7/8 counts to seven." }, { icon: "sheet", title: "Worksheets for teaching", body: "Build A4 exercise pages bar by bar, save reusable templates, then play through each exercise on loop — with a fresh count‑in between exercises. Numbered layout designed for clean teaching handouts." }, { icon: "preset", title: "Practice Library", body: "Grooves, worksheets and rudiments — saved by name, searchable, always in reach. Comes stocked with built‑in presets and teaching templates, so the library is useful from your first session." }, { icon: "print", title: "Print & PDF export", body: "Print full groove scores or worksheet pages as true vector output — crisp, engraved notation at any size. Save as PDF via the macOS print dialog — no extra setup, no fighting a notation package." }, ]; function Features({ accent, showIcons }) { return (
§ 01Features
writing · teaching · practice

Everything you need to write a part —
and nothing you don't.

{FEATURES.map((f, i) => { const I = Icon[f.icon]; return (
0{i + 1}
{showIcons && (
)}

{f.title}

{f.body}

); })}
); } // ─── Teaching tools ──────────────────────────────────────────────────────── const TEACHING = [ { mark: "R\u2009L", title: "R/L sticking & voice control", body: "Add right/left stickings above any note, and move notes between voices — singles, doubles and paradiddles voiced around the kit." }, { mark: "\u2016:", title: "Repeat-mark exercises", body: "Worksheet exercises print with proper repeat marks, so handouts read like real practice material — not screenshots." }, { mark: "1\u20138\u00d7", title: "Loop each exercise 1–8 times", body: "Set how many times to loop each numbered exercise before the page advances. Hands-free practice through a worksheet." }, { mark: "\u2922", title: "Play-along full screen", body: "A big, clean score for the lesson-room display. Auto-scrolls bar by bar with the playhead, with giant count-in numerals between exercises." }, { mark: "\u25C9", title: "Note colour palette", body: "Colour-code notes on the grid for teaching, grouping or visual practice cues. Stays visible in the live notation view." }, { mark: "\u29B8", title: "Show / hide instruments", body: "Hide guide parts from the printed notation while keeping them in the grid. Clean handouts without rebuilding the groove." }, ]; function Teaching({ accent }) { return (
§ 02Teaching tools
built for lessons

Not just a groove editor —
a lesson and practice tool.

If you teach drums (or you're teaching yourself), BeatBake handles the lesson-room details a notation package usually makes you fight for.

    {TEACHING.map((t, i) => (
  • {t.mark}

    {t.title}

    {t.body}

    • ))}
); } // ─── Showcase (worksheets + library + mixer) ────────────────────────────── function Showcase({ accent }) { return (
§ 03In the app
worksheets · library · mixer

Built for the way
drummers actually work.

Turn an afternoon of writing into a stack of printable exercises. Save your favourites to the Practice Library and balance every voice in the mixer — all without ever leaving the page you're working on.

BeatBake — Simple Fill Builder
BeatBake worksheet builder with eight numbered exercises laid out for printing
Worksheet builder · 8 numbered exercises · A4 layout
BeatBake — 7_8 Groove.drumgroove
BeatBake step grid in 7/8 with the editing toolbar: note value, voice, colour, accent and sticking controls
Step grid · 7/8 · note values, accents, sticking & colour
); } // ─── iPad — coming soon ──────────────────────────────────────────────────── function Ipad({ accent, ipadUrl }) { const live = ipadUrl && ipadUrl.trim() !== "" && ipadUrl.trim() !== "#"; const ON = [0,2,5,8,11,13,16,19,22,24,27,30]; return (
§ 04On iPad
Coming soon

BeatBake is coming to iPad.

The same drum‑editor, rebuilt for touch. Sketch grooves with your fingers, read them back as live notation, and take your worksheets wherever you teach.

{live ? Available on the App Store : iPad version — coming soon } Universal iPad app · free trial planned
); } // ─── Buy section ─────────────────────────────────────────────────────────── function Buy({ accent, buyUrl, downloadUrl }) { return (
§ 05Pricing & licence
one‑time purchase · free 7‑day trial
£ 17 .99
VAT included where applicable
  • ✓ BeatBake for macOS, full version
  • ✓ Built‑in groove presets & worksheet templates
  • ✓ Free updates throughout v1.x
  • ✓ Licence activation handled by Lemon Squeezy

Try everything free for 7 days. After the trial, saving your work, printing, and MIDI Out require a licence — your grooves stay on your Mac either way.

Secure checkout via Lemon Squeezy. Card, Apple Pay, PayPal. Licence key by email within 60 seconds.
); } // ─── System requirements ───────────────────────────────────────────── const SYSREQS = [ { icon: "apple", k: "Operating system", v: "macOS 14 (Sonoma) or later" }, { icon: "display", k: "Minimum window", v: "About 1100 × 720" }, { icon: "display", k: "Recommended", v: "1280 × 800 or larger" }, { icon: "sheet", k: "Best for worksheets", v: "1440 × 900 or larger" }, ]; function SystemReqs({ accent }) { return (
§ 06System requirements
before you download

What you need to run BeatBake.

BeatBake is a Mac app today, with an iPad version coming soon. It runs in a small window, but worksheet building is comfier with a little more room.

{SYSREQS.map((r, i) => { const I = Icon[r.icon]; return (
{r.k}
{r.v}
); })}

Note: at the minimum window size the macOS print dialog can feel large — that’s normal system behaviour, not a bug.

); } // ─── Footer ──────────────────────────────────────────────────────────────── function Footer({ accent, buyUrl, downloadUrl }) { return ( ); } // ─── App ─────────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); return (
); } ReactDOM.createRoot(document.getElementById("root")).render(); // Hook up the Lemon Squeezy overlay checkout to every . // lemon.js scans the DOM once at script-load time, but our buttons are React-rendered after // that — so we re-run setup as soon as React has mounted (and again whenever lemon.js // finishes loading). function initLemonSqueezy() { if (window.createLemonSqueezy) { try { window.createLemonSqueezy(); } catch (e) { /* ignore */ } } else { setTimeout(initLemonSqueezy, 100); } } requestAnimationFrame(initLemonSqueezy); window.addEventListener('load', initLemonSqueezy); // Safety net: if a click sneaks through before lemon.js is ready, intercept it and open // the overlay manually. createLemonSqueezy() is idempotent, so calling it on click just // rebinds the handler and we retrigger. document.addEventListener('click', (e) => { const a = e.target.closest('a.lemonsqueezy-button'); if (!a) return; if (window.createLemonSqueezy && !document.body.classList.contains('lemonsqueezy-open')) { // Bind handlers, then let lemon.js handle the next click naturally window.createLemonSqueezy(); } }, true);