
Chrome Has a Document Design Mode - catchmeifyoucan
https://dev.to/arbaoui_mehdi/edit-your-website-live-in-google-chrome-by-using-document-designmode-5d9h
======
kn0where
Is this different than

    
    
      document.querySelector("html").contentEditable = true;
    
    ?

~~~
catchmeifyoucan
Yes. This is like editable text for any text on the screen enabled.

~~~
nulld3v
But that's what contentEditable already does?

~~~
catchmeifyoucan
Right. Turning this mode on makes everything contentEditable so you can change
up a website.

For example, let's say your making mockups and want to change some text. This
lets you do that really quickly.

~~~
szhu
Yes, we heard you the first time. The code snippet kn0where posted has the
same effect. :)

I looked into this some more, and I think the actual difference between
`document.documentElement.contentEditable` and `document.designMode` is subtle
and probably mostly just in principle: since contentEditable is set on
elements, someone with only access DOM access could potentially toggle it. But
someone with only DOM access cannot turn `document.designMode` off.

------
snowoutside
This is not specific to Chrome.

`document.designMode` is a web standard and is supported by Firefox, Safari,
IE, etc.

[https://developer.mozilla.org/en-
US/docs/Web/API/Document/de...](https://developer.mozilla.org/en-
US/docs/Web/API/Document/designMode)

