Blue Sky HTML Editor

Over the last few months, I’ve been working on an HTML/CSS editor. I wanted a better teaching tool for web design so I decided to create one myself. The goal was to have the following features:

  • real-time preview
  • syntax highlighting
  • saving and opening files to and from disk

blueskycapture

For the most part, I think this has been pretty successful though it is still very much a work in progress. I used Downloadify to do the saving and EditArea for the syntax highlighting.

Now, this is really nothing new. Similar things are done at Codecademy with a variety of languages and at Khan Academy with ProcessingJS. On the desktop, HTMLKit and CoffeeCup have HTML editors with real-time preview.

But none of those tools felt right so that’s why Blue Sky was created. I realized that I’ve been doing this for most of my teaching career: using my background in computer science to make the things I need in order to teach the way I want. I’ve collected a number of these projects at Encoding Math.

2 thoughts on “Blue Sky HTML Editor

  1. David Wees

    I’m not sure if this is a security issue or not, but I noticed that the script tag is fully allowed, which means people could in theory run arbitrary Javascript in your editor. This probably not a big deal, unless users have a way to access each other’s files.

  2. Mr. Wang Post author

    User files are stored locally and Blue Sky runs entirely in the user’s own web browser so there’s no danger to either the server Blue Sky is stored on or other users’ files. The fact that you can write your own Javascript and see it run in the preview pane was an unintended perk!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>