HTML DOM designMode Property

Last Updated : 11 Jul, 2025

The DOM designMode property in HTML is used to specify whether the document is editable or not. It can also be used to set the document editable. 

Syntax:

  • Set: This property is used to set whether the document is editable or not.
document.designMode = "on|off";
  • Get: This property is used to return whether the document is editable or not.
document.designMode

Property Value: This property contains two values which are listed below:

  • off: It is the default value. In this mode, the document is not editable.
  • on: In this mode the document is editable.

Example 1: In this example, we will use DOM designMode property.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        DOM designMode Property
    </title>
</head>

<body style="text-align: center; ">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>DOM designMode Property</h2>
    <p>This document is editable!</p>

    <!-- script to set designMode property
        editable -->
    <script>
        document.designMode = "on";
    </script>
</body>

</html>

Output: 

Example 2: In this example, we will use the get method of designMode.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        DOM designMode Property
    </title>
</head>

<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>DOM designMode Property</h2>
    <button onclick="myFunction()">
        Get the designMode
    </button>
    <p id="geeks"></p>
    <!-- script to display designMode -->
    <script>
        function myFunction() {
            let x = document.designMode;
            document.getElementById("geeks").innerHTML = x;
        }
    </script>
</body>

</html>

Output: 

Supported Browsers: The browser supported by the designMode method are listed below:

Comment

Explore