Tweakr

About

Instantly edit your UI directly in the browser. Hover over any element, tweak styles visually, and your local source code updates automatically.

Detailed Description

Stop hunting through your codebase just to change a single button color.

Tweakr bridges the gap between your browser and your code editor. Activate Tweakr, hover over any element on your local development site, and use the floating visual toolbar to make changes. Modify text, adjust CSS properties, or delete DOM elements entirely. Every visual edit you make is instantly written back to your local source code. No more context switching—just seamless, real-time UI development.

Why developers choose Tweakr:

Visual DOM Manipulation: Hover over and click any element to change text, tweak styles, or completely wipe it from the DOM.

Live Style Editor: Adjust colors, typography, and spacing on the fly with a built-in color picker and instant visual feedback.

Framework Agnostic: Works flawlessly out of the box with Angular, React, Vue, Svelte, or vanilla HTML/JS/CSS.

Clean Code Output: Generates production-ready code. CSS is mapped directly to your stylesheets using standard naming conventions like BEM—never as messy inline styles. Test files are updated automatically.

Smart & Safe: Automatically protects dynamic data, form inputs, and event handlers from unintended modifications.

Granular Scoping: Choose to apply CSS changes globally or target specific component overrides.

Instant Reverts: Made a mistake? Use the one-click undo to revert your source code instantly.

Zero-Friction Setup: Install the VS Code extension and the background server starts automatically.

How to get started:

Install Tweakr in Chrome and VS Code (or run npx tweakr in your terminal).

Open your local web app in the browser.

Click the Tweakr extension icon and hit Start Editing.

Hover, click, and tweak. Check your git status to see the changes instantly reflected in your files.

Requirements:
Tweakr relies on a local bridge server to sync browser edits with your file system. The most seamless workflow is installing our VS Code extension, which handles the server execution automatically. Alternatively, you can run npx tweakr directly from your project directory.