welingtondesosa

welingtondesosa / vibedit

Public

Visual editing overlay for React apps — click any element, edit styles and text, source files update live. No AI. No cloud.

vibedit.infinit.tools developer-tools nextjs react typescript visual-editor
23
2
100% credibility
Found Apr 10, 2026 at 23 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Vibedit provides a browser overlay for visually editing styles and text in React apps during development, automatically updating the source files locally.

How It Works

1
📰 Discover Vibedit

You find a handy tool that lets you tweak your web page's look and words right in the browser, with changes saving straight to your files.

2
🛠️ Set it up easily

Tell Vibedit to join your project with one quick instruction, and it handles all the prep work automatically.

3
▶️ Run your page

Start your web app as usual, and notice a small floating button appear in the corner.

4
✨ Turn on edit mode

Click the button – your cursor turns into a picker, ready to grab any element on the page.

5
🎨 Click to edit

Tap any text, button, or box – a side panel pops up with simple sliders for colors, sizes, spacing, and words.

6
🔄 Tweak and save

Slide, type, or change – watch the page update live, and your design files change too, all automatically.

7
↩️ Undo anytime

Hit undo or escape if needed, then keep going or close the panel to admire your work.

🎉 Design like magic

Now you craft beautiful pages visually, with perfect code updates – faster and way more fun!

Sign up to see the full architecture

6 more

Sign Up Free

Star Growth

See how this repo grew from 23 to 23 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is vibedit?

Vibedit overlays a visual editor on React apps using Next.js or Vite, letting you click any element to tweak inline styles, text, or props in a side panel—source files update live via local WebSocket. TypeScript-built, it handles i18n translations, breakpoint CSS, and drag-reorder with one npx init command per framework. No AI, cloud, or accounts; pure local visual editing software like a github visual studio code extension for live tweaks.

Why is it gaining traction?

AST parsing ensures clean, Prettier-formatted commits without regex hacks, plus browser Ctrl+Z undo and Shadow DOM isolation for zero style leaks. Beats visual editing ai tools or cms like visual editing sanity/directus by staying offline, with demos proving click-to-edit flows rival github visual copilot for apps. One-command setup and prod-zero impact hook devs tired of DevTools guesswork.

Who should use this?

React frontend devs on Next.js/Vite iterating UIs fast—tweak typography, spacing, or text during design reviews without editor swaps. Suits solo prototypers or teams handling handoffs, i18n updates, or responsive fixes; extends to plain HTML for hybrid setups. Skip if you need Tailwind/CSS Modules (planned).

Verdict

Promising local visual editing cursor for React despite 23 stars and 1.0% credibility—docs shine, but maturity lags on edge cases. Try in a demo-next app; it'll cut visual editing techniques time if your workflow matches.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.