designMode

By  on  

Every once in a while I stumble upon an API or browser setting that I can't believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics, and even blink, which wrap given string text in their representative HTML tags. Bizarre.

It was recently brought to my attention the document.designMode API: an on|off switch that acts almost like a contentEdible attribute for the entire document. You can toggle designMode by simply changing the setting:

document.designMode = "on";

With the designMode setting on, you can edit page text, drag and drop assets, and generally cause chaos on the page. This is really nice for prototyping; I'd have loved to have known about this while doing client work.

While I see uses for this API, it does feel a bit bizarre. I'd have liked to have known the origins of this property and its use cases. Have ideas about how you'd use it? Share!

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    Event Delegation with MooTools

    Events play a huge role in JavaScript. I can't name one website I've created in the past two years that hasn't used JavaScript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an...

  • By
    Implement jQuery’s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

Discussion

  1. Hi David,

    thanks for the trigger!
    We digged deeper and unveiled the origin: https://twitter.com/slicknet/status/1180862121371811840

    That was fun :-D

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!