thisone

Design mode for your running app. Click any element, change it, and the edit is written back to your source code.

Turn on edit mode, pick an element on the page, tweak its Tailwind classes or text, and hit Save. The change goes into the exact file and line it came from. Every save is a one-line diff.

Check the demo

Why I built this

On my latest project I tried doing (almost) all the design and prototyping in Claude Code in VS Code. Almost. It's because I still designed like 2–3 screens on canvas, did some sketching, and sometimes pushed stuff from code to Figma. 'thisone' is the quick and simple edit I kept missing along the way.

Claude Code is great, and using it gave me a lot of inspiration for how to use it. One of those ideas was building little tools for my own process. I'm pretty sure there's already something out there like what I built here, but I wanted to challenge myself to design one anyway. I've always wanted to work on design tools, ever since the Sketch days and then Figma. That's one of the reasons thisone exists.

Another reason: honestly, to me this isn't really about releasing a software/package/tool. I still don't know if I'll be maintaining it long term. I don't have a roadmap. But I'm happy to put out a question I keep asking myself, in the form of a tool like this one: whether, however fast or far we go with vibe coding, we still need something in between, where our hands can do the fine-tuning…

Installation

npm i -D

npm i -D

npm i -D

Add the editor to your project (one time), then start your app with it:

npx thisone --root . --wire

npx thisone --root . --wire

npx thisone --root . --wire

Open your app, click Edit mode in the bottom right, and click on anything.

⚠️ thisone writes to your source files. Start from a clean git status so you can see exactly what changed.

What you can change

You can edit padding, margin, gap, radius, borders, colors, font, size, weight, and alignment. You can also edit text or delete an element. Undo and redo work before you save, and nothing touches disk until you press Save.

Requirements

• Next.js App Router with Turbopack

• Tailwind v4

• Node 20.9+

• Local dev only (not for production)

Removing it

--wire makes three small, dev-only changes and backs up the originals first. To undo them exactly:

npx thisone --root . --unwire

npx thisone --root . --unwire

npx thisone --root . --unwire

Prompt tab (optional)

Run npx thisone --root . --prompt to add a tab that sends the selected element to Claude Code, so you can ask for something like "make this a card." It's off by default.

Good to know

• Editing a shared component changes every instance of it.

• Inline style={{ }} colors and text from variables can't be edited.

• cn() is supported. cva() and template literals aren't yet.