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.

Example of the script working.

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

  1. Install Tampermonkey.
  2. Add a new script and paste the code.
  3. Optional: Update the // @match *://*/* part of the user script to only allow the script to run on specific sites.
  4. Save and enable the script.
  5. Click the pencil icon in the bottom-right to toggle edit mode.
  6. 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! 🙂