DEV Community

Cover image for I built an online code editor
Chris McCormick
Chris McCormick

Posted on

I built an online code editor

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…

Top comments (13)

Collapse
 
nastyox1 profile image
nastyox • Edited

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?

Collapse
 
chr15m profile image
Chris McCormick

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.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

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?

Collapse
 
chr15m profile image
Chris McCormick

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:

Collapse
 
miketalbot profile image
Mike Talbot ⭐

That is very very cool :)

Collapse
 
chr15m profile image
Chris McCormick

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!

Collapse
 
redeving profile image
Kelvin Thompson

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!

Collapse
 
timebandit profile image
Imran Nazir

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

Collapse
 
chr15m profile image
Chris McCormick

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

Collapse
 
manishfoodtechs profile image
manish srivastava

Awesome πŸ‘.

Collapse
 
kailyons profile image
Loralighte

Nice!

Collapse
 
alphaolomi profile image
Alpha Olomi

Awesome!!!

Collapse
 
sumitkolhe profile image
Sumit Kolhe

Awesome work