Reading Time: 3 minutes

About two and a half years ago, I lived in Colorado, and had to fly out to Columbus Ohio pretty regularly. On one such flight, I wanted to test out some CSS and HTML. But I didn’t have any Wifi on the plane.  When you don’t have internet, and you want to do a quick code-and-preview, it can be  annoying when you have to fire up a local server and set up your files. I figured that there should be a code editor that could work regardless of whether you had an internet connection.

So I made one.

For the rest of that plane ride, I decided to work on an editor that I would want to use. It had four requirements:

• You should be able to edit and preview HTML, CSS, and JavaScript
• It should work without an internet connection
• It should never depend on external files or libraries in order to work
• It should work as a single file

It should be a code sandbox — completely self-contained and not reliant on anything other than a functioning web browser.

Meet McSandy

I was running short on creativity in the name department. “Sandy” because it’s a sandbox, “Mc” because it sounds cool.

McSandy has all of the things that I wanted out of an editor, so in addition to its four fundamental requirements, there’s some other features, too:

• You can get an export of your CSS, HTML, and JavaScript in one file (there’s a download button)
• You can drag your CSS, HTML, or JavaScript from the browser to  the desktop
• You can drop a text file into the CSS, HTML, or JavaScript fields and it will expand it for you
• You can drop an image into the HTML or CSS fields – and that image could be anything, including SVG
•  Every “sandbox” that you make gets a URL – so you can book mark it for later

Under the Hood

McSandy is all HTML5, all the time. Don’t bother expecting it to work in anything less than IE10. I developed it for Chrome, and it should work in FireFox, Safari, and Opera, too. McSandy uses a few “HTML5” features:

CSS

• The layout uses CSS’ Flex box module — that’s one of the many reasons it won’t work in IE9
• Animations: There’s some subtle stuff in there, some transparencies, but nothing too radical
• A preprocessor: I used Stylus and NIB to make things work together. A really neat thing is that the color palette is generated entirely on one color; so if you want to change the entire experience, you can

JavaScript

• McSandy is 100% vanilla JavaScript; no Angular, no jQuery; I didn’t want a dependency on  external libraries to get things done
• I use Eli Grey‘s filesaver.js for the download feature

HTML5ishness

• NavigatorOnline for knowing if you have an internet connection
• The actual preview is an iframe whose src is set to the url of a Blob
• localStorage for saving your projects — which is also why you won’t get your projects if you use McSandy in a different browser
• Drag and Drop for… you know… dragging and dropping

Bugs and Things

McSandy is officially in Beta. That means that I’m sharing it with the world,  asking you all to try it out, and tell me what you think.  The project is up on Github. For right now, it is not open-sourced. Once McSandy is out of beta, I will probably make the offline version of it open-sourced (that’s a hint of things to come).

If you see a bug, or want a feature, report it on Github.  If you have questions about features, check out the Wiki on Github.   Within the week, I’ll probably make a video that highlights its features.

TL;DR

I made a thing. It lets you write code, and preview it. It doesn’t even need internet to work. It’s 351 kb and just under 3000 lines of code.

You can go to McSandy.com and start playing around. If you want to download it, then save the web page. Click on it, and it’ll work. It’s kinda cool like that.

If you think this tool would be even remotely useful, maybe consider buying me a cup of coffee? Click on the i in the upper right corner to find out how.