Sandeep Mewara">
Click here to Skip to main content
15,077,494 members
Articles / Web Development
Posted 23 Jul 2020


3 bookmarked

HTML DOM designMode Property

Rate me:
Please Sign up or sign in to vote.
4.50/5 (6 votes)
23 Jul 2020CPOL1 min read
How to make any browser a basic html editor.
While working on one of my recent blogs, I stumbled upon an HTML DOM property that looked interesting.

In the past:

  • I had to see how the text change looks in a webpage – make change, refresh page or run the application again
  • I had to inspect, find the related DOM to make any text change to it and then write code to make the change to see it
  • I downloaded HTML page and then made some change in its text to add/edit/remove some comments for clean print.
  • Have some logic to provide an editable HTML page to users

Well, no more. Seems we have a new property (surely it was not there few years back but introduced recently): document.designMode

I tried in Firefox, from menu items, go to: Tools -> Web Developer -> Web Console. Write:

document.designMode = "on"

Post this, you can edit the webpage text right in your browser!


Sample real use case could be providing a portion of page editable to users. Add that in an iframe and then turn the designMode of that to ‘on’:

iframeNode.contentDocument.designMode = "on";

A string indicating whether designMode is (or should be) set to on or off. Valid values are on and off

In Internet Explorer, it would be under Developer Tools, and so on for other browsers.

Image 2

Browser Compatibility

Nice to have something like it to convert browser into a basic HTML editor! Keep learning.



  • 23rd July, 2020: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sandeep Mewara
Software Developer (Senior) Intuit India
India India

Comments and Discussions

SuggestionMessage Closed Pin
27-Jul-20 0:59
MemberMember 1489990527-Jul-20 0:59 
BugTypo Pin
jakopo8723-Jul-20 20:12
Memberjakopo8723-Jul-20 20:12 
PraiseRe: Typo Pin
Sandeep Mewara23-Jul-20 20:43
mvaSandeep Mewara23-Jul-20 20:43 
GeneralMy vote of 5 Pin
dchalom23-Jul-20 7:02
Memberdchalom23-Jul-20 7:02 
This is fantastic. Now obviously it's not to save the content, but to view how the new changes would look...great tip, thanks
GeneralRe: My vote of 5 Pin
Sandeep Mewara23-Jul-20 9:05
mvaSandeep Mewara23-Jul-20 9:05 
GeneralRe: My vote of 5 Pin
Rajeev.Bera5-Aug-20 11:30
MemberRajeev.Bera5-Aug-20 11:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.