HTML Instant - Real-time HTML Editor | Hacker News Reader

HTML Instant - Real-time HTML Editor

htmlinstant.com

11 pointsrcollamore20 comments

Why is this noteworthy?

  $('textarea#markup').keyup(function(){
      $('div#preview').html( $(this).val() );
  });

While it is true that this is dead simple to implement (and probably exists elsewhere. I know there are plenty of side-by-side editors that require you to push a button. I bet one realized they could eliminate that.), it's still very useful for people learning HTML, wanting to try some obscure thing with HTML super-fast, etc.

Easy to implement != useless or boring. Look at Twitter.

No doubt; I'm just surprised that something this common made the front page, even if putting "instant" in front of things is all the rage.

1. Noteworthy lies at the intersection of "useful" and "unique." "Complicated" and "difficult" doesn't come into play.

2. Because it's something immediately useful to which I can direct anyone learning HTML so that they get instant feedback.

It's noteworthy because it says "instant".

Nice! Very similar to my live HTML/PHP editor for Mac OS X called HyperEdit:

http://www.tumultco.com/HyperEdit/

A couple of ideas:

* Utilize contenteditable to go the opposite direction

* Bookmarklet to open any page you are viewing in htmlinstant.com

* Save the document to local storage (cookie or html5 client-side db) in case the page is closed

* Snippets for commonly used functions (like table or list tags)

And of course the further you take the editor, the more capable this will be. Bespin (https://bespin.mozillalabs.com/) in the best in-browser editor I've seen.

Hm, dangerous back button. I liked the fact it served as an undo, but I wanted to navigate back here to say so, and had to click though a whole minute of edits. I would suggest not breaking the default functionality, back buttons should go back. Instead add an undo/history/revision button.

I'd like to point out Firebug has this feature and much more.

Exactly, it's like a crippled version of Firebug.

At least in Firebug, when you reload the page your Javascript edits are still there.

Reminds me of http://jsfiddle.net/ - JS lib, JS, HTML, CSS, AJAX and your Result all on one screen.

Looks like an excellent learning tool for newbies. :)

I think this would be more valuable if it integrated:

* Syntax highlighting

* Saving

* HTML Entities

* Code completion

* Clean up or 'tidy' function to format the code

* The ability to modify the <head> attribute (if it's possible)

i agree

If someone were to implement this with vi keybindings, and/or Zen Coding macros, then it'd be truly noteworthy.

This is great, a great learning tool. Thank you for sharing (or even making?) this!

Off topic:

I just tried embedding a marquee inside of a marquee and it surprisingly worked.