Until recently, mocking up website copy in existing websites meant digging through <divs> and other markup to make changes, but this little bookmarklet makes the whole process much easier.

 

Enable Design Mode

Most modern browsers have a built-in function called designMode, which makes it easy to modify copy. Save this Javascript snippet as a browser bookmarklet and call it whatever makes sense to you eg. “Design mode”.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Then visit any webpage or HTML document, click the bookmarklet, and you can start modifying the text of a website. You can then take screenshots of the modified text to send to stakeholders or even mock up content with them.