Turn Your Browser into a Live HTML Editor with a Simple Data URI Trick
This article explains how entering a specially crafted data:text/html URI in the browser address bar creates a temporary, editable HTML page, and shows multiple community extensions that add syntax highlighting, theming, and custom behaviors using Ace editor and other tricks.
Jose shared a tip on CoderWall: typing a specific data:text/html URI into the browser’s address bar turns the browser into a temporary editor.
Why it works: the data URI format tells the browser to render the supplied HTML, and the HTML5 contenteditable attribute makes the page editable. This only works in modern browsers that support contenteditable (IE 8 does not).
Basic example: data:text/html, <html contenteditable> Community members extended the idea by loading the Ace editor for syntax highlighting. The following snippet creates a full‑screen Ace instance with the Monokai theme and Ruby mode:
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>By replacing the mode string, the editor can highlight many other languages:
Python → ace/mode/python
C/C++ → ace/mode/c_cpp
JavaScript → ace/mode/javascript
Java → ace/mode/java
Scala → ace/mode/scala
Markdown → ace/mode/markdown
CoffeeScript → ace/mode/coffee
Theme alternatives are also possible by swapping the theme path, e.g., ace/theme/eclipse or ace/theme/textmate.
Other creative variations include using a textarea as an invisible editor with autofocus:
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />Or adding dynamic background color changes, custom fonts, and transitions with inline CSS and JavaScript:
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">These variations were contributed by community members such as jakeonrails, slawdan, jdkanani, montas, and bgrins. The technique works in browsers that support data URIs and the contenteditable attribute, providing a quick way to turn any browser window into a lightweight, customizable editor.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
ITPUB
Official ITPUB account sharing technical insights, community news, and exciting events.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.