Baton case study: a website editor clients can actually use

Case study · Product · My own

Baton is a visual editor I designed and built from scratch. A developer connects a site once, and the client can change its words, photos and links themselves, with drafts, publishing and rollback. This is how it went, from the first idea to a live product.

Product: Baton
Type: Web app (SaaS)
Role: Founder, design and engineering
Stack: Next.js, Supabase, Resend
Started: October 2026
Status: Live, with a free plan

Visit batonedit.com Book a free call

The brief

Hand it over, then let go.

A finished website is only half a delivery. The people who own it, business owners and marketing teams, often cannot change a sentence on it without asking someone technical. The developer becomes a bottleneck, and the client stops trusting their own site.

The brief I set myself: a tool where a client can safely edit their live site, a developer stays in control of what is possible, and nobody has to learn code or wait on a ticket. It had to work on the sites that already exist, not only on ones built for it.

The process

Seven stages.

The problem

I build websites for clients, and the handover usually ends the same way: the client is afraid to touch their own site. Every small change, a word, a photo or a link, becomes a ticket back to the developer. I decided to build the missing piece myself.

Name and brand

It began as a working name, Handover. I renamed it Baton, the thing passed on in a relay, and drew the identity myself: a lowercase b whose stem hands over into a circle, flat colours only (ink, signal orange and paper) and a bold wordmark.

Detect the stack

A developer pastes a site address and Baton works out what it is built with, such as WordPress, Shopify, Webflow or Next.js, and which way edits can be saved. The page then loads in the editor from a separate address, so the real site can be edited safely.

The in-page editor

The client clicks text, a picture, a button or an icon on their own page and changes it in a side panel. Text updates as they type, buttons get a separate label and link, and a list of everything on the page reaches text hidden inside tabs and accordions.

Draft, publish, roll back

Edits are saved as a draft first and can be previewed on desktop and phone. Publishing creates a numbered version. Every version is kept, so a mistake can be rolled back instead of fixed by hand.

Handing over

The developer invites the client by email. The client becomes the owner and the developer steps down to developer. Three roles (owner, developer and editor) decide who can change what, and each invite is locked to the email address it was sent to.

Security and setup

Before anyone else used it I hardened it: edited HTML is cleaned on the server, the editor refuses private network addresses, passwords are hashed, and accounts can use two-step login and email confirmation. When a tester could not find the install step, I added a guided setup that checks the site is connected.

Inside the app

What the client sees.

Baton's editor: a live website on the left, with the toolbar above and the Click anything to edit panel on the right — Click anything on the page to edit it.

Editing a headline in Baton: the text changes on the page as it is typed, with colour choices from the site's own palette — Text changes on the page as it is typed.

Baton's phone preview: the same page at phone width, with a button selected and its link chosen from a list of the site's pages — Check the phone view before anyone else sees it.

The website

A product site to match.

Baton’s own site, designed and built too. Hover a page to scroll it from top to bottom. On a phone, each one scrolls by itself as it comes into view.

What made the difference

What mattered.

Two ways to save an edit

For WordPress, Baton writes the change into the post itself, so nothing extra loads on the page. For other sites, one small script applies the published edits live. The developer sees which route a site uses.

Built to be handed over

Ownership moves from developer to client in one invite. The client gets full control, the developer keeps access to help, and the activity log shows who changed what.

Setup that explains itself

A four-step guide (site added, install, invite the client, first publish) with the right instructions for the platform it detected, and a check that confirms the script is live.

The result

Live, and in use.

roles: owner, developer, editor
automated security checks
steps from a new site to a first edit

Baton is live at batonedit.com with a free plan, a pricing page, documentation and a changelog. Its script is also installed on this site. If you build sites for clients, or you own one you cannot edit, I would like to hear how it fits.

Try Baton Book a free call See more work

GET IN TOUCH

HAVE A PROJECT? LET'S TALK.

Tell me about your project. I'll reply within 24 hours with an honest take on whether I can help and how.

samuel@adefilasamuel.com

Copy

Upwork

Samuel Adefila. Top Rated

linkedin.com/in/adefila-samuel