loading...
Cover image for I built an online code editor

I built an online code editor

chr15m profile image Chris McCormick ・1 min read

https://slingcode.net/

I built a web based IDE with live-reloading which you can use to make, run, and share web apps. I made it for my kids so that they have a nice simple environment in which they can learn web app development without complex command line tooling and hosting, but I hope it will be useful to non-kid amateurs and maybe even professionals too.

The main things it does differently from existing online code editors are:

  • It's fiercely independent, entirely self-contained in a single HTML file with no server side dependencies.
  • It supports live-reloading of changes so you can iterate very quickly on designs and functionality.
  • You can share the apps you make peer-to-peer between different devices so you don't need to host them online.

GitHub logo chr15m / slingcode

personal computing platform

Slingcode is a personal computing platform in a single html file.

  • You can make, run, and share web apps with it.
  • You don't need any complicated tools to use it, just a web browser.
  • You don't need a server, hosting, or an SSL certificate to run the web apps.
  • You can put Slingcode on a web site, run it from a USB stick, laptop, or phone, and it doesn't need an internet connection to work.
  • You can "add to home screen" in your phone's browser to easily access your library of programs on the go.
  • You can share apps peer-to-peer over WebTorrent.
  • It's private. You only share what you choose.

Try it: slingcode.html

Or right-click on slingcode.html and "save link as" to download the HTML file onto your own computer.

Video

Slingcode video

About

There is no server component for Slingcode. The apps are stored in the…

Discussion

markdown guide
 

Nice! One of the first full-stack projects I did was similar to this. I always thought detecting infinite loops before running the code to prevent the webpage from stalling would be a good feature, though maybe hard to robustly implement. What happens when the localStorage runs out of memory?

 

Thanks! Slingcode uses IndexDb to store apps which has more space than localStorage. At the moment there is no warning if storage is full but there is a note in the code to implement something sensible in the future like warning the user.

Detecting infinite loops sounds tricky. You may be intersted in the halting problem.

 

Brilliant! And the QR code aspect is great! Thank you. Already on my phone ... Better than anything else I've used on the phone. Respect. Cheers!

 

What a wonderful thing that is... Can see me getting my daughter using that. Does it/could it work with babel in the browser to support ES6?

 

I just tested this and it works by the way. I followed the instructions on Add React to a Website with the Slingcode editor and it worked perfectly translating JSX etc. I made a video of it which you can see here:

 
 

Yes, I beleive it's possible to get babel running from a script tag. Will be slower I think. I should add an example for doing this, thanks for the idea!

 
 
 
 

Really nice. Does the send/receive section using web sockets?

 

It uses WebRTC (peer-to-peer) via the WebTorrent library.