This Tampermonkey script adds a floating button that allows you to quickly edit any webpage, perfect for rapid UI mockups without needing developer tools or design software.
What It Does
The script adds in an edit button and Ctrl+Shift+E
shortcut that allows you to edit text and spacing on web pages. It allows you to toggle the edit-mode on and off.
Why It’s Useful
- Directly edit live pages instead of creating mockups
- Quickly share design ideas or UI changes with developers via screenshots
- Saves time, compared to editing the elements via the developer menu
How to Use It
- Install Tampermonkey.
- Add a new script and paste the code.
- Optional: Update the
// @match *://*/*
part of the user script to only allow the script to run on specific sites. - Save and enable the script.
- Click the pencil icon in the bottom-right to toggle edit mode.
- Use
Ctrl+Shift+E
as a shortcut.
The Script
// ==UserScript==
// @name Edit Mode Toggle
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Adds a floating button to toggle edit mode on any website
// @author Emlin
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const btn = document.createElement("button");
btn.innerText = "✎";
btn.title = "Toggle Edit Mode";
btn.style.position = "fixed";
btn.style.bottom = "20px";
btn.style.right = "20px";
btn.style.width = "40px";
btn.style.height = "40px";
btn.style.borderRadius = "50%";
btn.style.background = "rgba(128, 128, 128, 0.5)";
btn.style.color = "white";
btn.style.border = "none";
btn.style.cursor = "pointer";
btn.style.zIndex = "9999";
btn.style.fontSize = "18px";
btn.style.boxShadow = "0 2px 5px rgba(0,0,0,0.3)";
btn.style.transition = "all 0.3s ease";
let editMode = false;
btn.onclick = () => {
editMode = !editMode;
if (editMode) {
document.body.contentEditable = 'true';
document.designMode = 'on';
btn.style.background = "rgba(40, 167, 69, 0.7)";
btn.style.transform = "rotate(45deg)";
} else {
document.body.contentEditable = 'false';
document.designMode = 'off';
btn.style.background = "rgba(128, 128, 128, 0.5)";
btn.style.transform = "rotate(0deg)";
}
};
document.body.appendChild(btn);
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey && e.key === 'E') {
e.preventDefault();
btn.click();
}
});
})();
Conclusion
This user script enables quick, in-context UI editing and mockups with zero technical effort. It’s ideal for fast design iterations and communication with developers. Happy editing! 🙂