DEV Community

Cover image for Edit Your Website Live In Google Chrome by using document.designMode
Arbaoui Mehdi
Arbaoui Mehdi

Posted on

60 11

Edit Your Website Live In Google Chrome by using document.designMode

I was on my twitter, reading stuff, then suddenly I see a tweet which shows a cool feature that I never thought exist, this feature is document.designMode which allows you editing the entire document directly, this property is set by default to off, let's change it to on and see the MAGIC HAPPENS.

Google Chrome document.designMode

document.designMode="on"
Enter fullscreen mode Exit fullscreen mode

Credit:

Top comments (9)

Collapse
 
andrebclark profile image
Andre โ€ข โ€ข Edited

I was expecting something like visbug. this feature feels more like a content editing mode than a 'design' mode. is there anything more you can do to this besides change text? what is the use case where this is actually helpful? I don't mean to be a contrarian, but what am I missing?

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi โ€ข

Sometimes long words can break the design, so document.designMode can be used to tweak the design in the Browser. This is an interesting article that go through some use cases of this feature:

css-tricks.com/using-devtools-twea...

Collapse
 
raymag profile image
Carlos Magno โ€ข

Dude, I'm so grateful for you sharing this awesome feature!

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi โ€ข

Same here, I really found this property super useful.

Collapse
 
ggarnier profile image
Guilherme Garnier โ€ข

BTW, this is not just for Chrome. It works basically with any browser, including IE6!

caniuse.com/mdn-api_document_desig...

Collapse
 
sulco profile image
Tomek Suล‚kowski โ€ข

Hey, glad you've liked it so much to spread the word ๐Ÿ’ช

And I appreciate crediting me :)

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi โ€ข

I really was amazed when I see your tweet, so all the credit is for you for sharing that with us. Thanks.

Collapse
 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป โ€ข

whaaaaattt :o

Collapse
 
iamarsenibragimov profile image
Arsen Ibragimov โ€ข

Wow! Didn't even no about it!

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

๐Ÿ‘ฅ Ideal for solo developers, teams, and cross-company projects

Learn more