Skip to content

ChijiokeDivine/PostView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Postview

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.

See it in action

Watch the demo on X


Why I made this

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.


What it does

  • Click to edit: Literally just click any text and start typing. It works because I'm using contentEditable and designMode under 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 + E to 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.


How to use it

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. capture: take your screenshot or screen recording. when you want the controls back, just hit the shortcut one more time.


The code stuff

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

About

A lightweight Chrome extension to live-edit web pages. Edit text, swap images, and fix layouts in real-time for mockups and screenshots.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors