For fun, I thought I’d look into making my own online editor for HTML, JS and SCSS. I ended up with a page I’m relatively happy with and I learnt a bit along the way. The page features SCSS compilation as well as saving to the URL.

You can check the page out here

By default – Javascript is disabled and not evaluated until you enable it. This can be seen in this demo which will only set the background to pink once you enable JS and interact with the editor. Be warned though, once Javascript has been enabled – if a script loops endlessly you may lock up your browser. Don’t run anything here you wouldn’t run yourself in the console!

Saving to URL was an unexpected issue for this project, Most URLs can only be about 2000 characters long1! This was overcome by using a GZIP implementation to first compress the data before inserting it into the URL parameter. This obviously doesn’t solve every use case, however the editor will now warn you when trying to load a code snippet that is too long from the URL.

I used the following packages to help with development:

Some of the main hurdles I encountered while working on this project were:

An unexpect side effect from this project is I now have inline code blocks & previews using plain iFrames! I don’t know if this is a good or bad thing yet haha.

© 2024 Pfych 🏳️‍⚧️