Stop taking screenshots of websites and wishing the headline was different or the button was a different color. postview is a Chrome extension I built that basically turns the entire internet into a Google Doc.
You can edit any text, move things around, and fix crappy landing pages in real time before you show them to a client or post them on socials.
I got tired of opening "Inspect Element" every time I wanted to change a single word on a site for a mockup. It’s annoying and slow. Postview lets you do it with one click or a shortcut. It’s great for designers, copywriters, or if you just want to make a funny meme of a news article.
-
Click to edit: Literally just click any text and start typing. It works because I'm using
contentEditableanddesignModeunder the hood. -
No broken links: When you're in edit mode, I disable links and buttons so you don't accidentally navigate away while you're trying to fix a typo.
-
Stealth mode: Hit
Ctrl + Shift + Eto hide the edit button entirely. This is perfect for when you want to take a clean screenshot without the extension UI getting in the way. -
Draggable UI: You can move the toggle button anywhere on the screen if it's blocking a menu or something.
-
Tailwind powered: I injected Tailwind so the UI looks clean and doesn't look like it's from 2005.
-
get it running: open chrome and go to
chrome://extensions. turn on "developer mode" in the top right, click "load unpacked," and select the folder where you saved these files. simple. -
summon the button: by default, the ui is hidden so it doesn't mess with your browsing. when you're on a page you want to mess with, hit ctrl + shift + e. a little pencil button will pop up in the bottom right corner.
-
flip the switch: click that floating pencil button. you'll see a quick "edit mode: on" status indicator. at this point, i've disabled all links and buttons on the page so you don't accidentally click away and lose your work.
-
go wild: click on any headline, paragraph, or button text. it'll behave just like a text editor. swap names, change prices, or rewrite entire landing pages to see how they feel.
-
clean up for the shot: once you're done editing, hit ctrl + shift + e again. this hides the button and the status indicator entirely, leaving you with a perfectly edited webpage that looks 100% real.
-
capture: take your screenshot or screen recording. when you want the controls back, just hit the shortcut one more time.
It's written in vanilla JS. It injects a small script that handles the toggle logic and uses localStorage to remember if you had edit mode on or off. I also added a custom print style so if you actually try to print the page or save as PDF, the extension buttons won't show up.
It’s simple, it works, and it doesn't have any bloat.
Feel free to fork it or whatever. If you find a bug just let me know.
Original Post: https://x.com/TekDiverse/status/1947870931319460238
