DEV Community

Renato Byrro for Dashbird

Posted on

20 5

Hack your Frontend with document.designMode

document.designMode is a cool feature.

Perhaps not a very well known feature, hence this heads-up ;)

By enabling it in console (document.designMode = 'on'), you can edit and experiment with a page content right from the browser.

No need to change code on IDE.
No refresh.
Just live, fresh mangling. yay!

Check it out:

document.designMode in action on Dev.to

Read more on Mozilla docs.

Top comments (3)

Collapse
 
prashantandani profile image
Prashant Andani

Wow.... Din't know this exist...

Collapse
 
byrro profile image
Renato Byrro

Yeah, cool isn't it?

Can be very handy, especially when one needs to tweak the content (text/img) and see how it looks right upfront.

Have fun!

Collapse
 
garador profile image
Garador

Holy sh*t

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay