---
title: Sandbox
summary: SCSS, JS & HTML web Sandbox
publishedAt: 1692935425000
updatedAt: 1717543018000
---


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](/sandbox.html)

By default – Javascript is disabled and not evaluated until you enable it. This can be seen in [this demo](/sandbox.html?data=eJxNUl1v2zAM%2FCusig0t0LjZ2%2BCmAbpgwB72BWQPLeo%2ByBYdq1VEQaSTeUX%2B%2ByR7WfMmHU93R1KvqpOtU6VaGLuDxmnm20rtLO4rtax8JYuw%2FBmRGSp15xysyGClQAgyB557FmgStrgOR%2FoD9dBoD9KhTzXndGDMN%2Fjy69tXeA%2Fr1XoNeyvdCAoFiHbTCdxD3YuQ5xOxHyGJDNRHMLhDRwFj0vRMDs9g0MPZxF1cp%2FhLdaUa5tRMMYZ7zRo1%2FZ6x%2FWP9poSaosE4S9DNWNLNyyZS700J523bjmCHOUsJH%2BbzdyMQtDHj649hfJahSbqSlrzMWr21biiBtecZY7ST0GHiFrVOY%2FvHD8RWLPkSdJ1a6AVvpsLeGumy6eQhpzn%2BQ6d5I5ojOjUVtbE9n%2BRO%2Foc0kOc8j8eiKC4MNf0WvRQblM8O85E%2FDau88u96ixfHtV9ePj3OnwqWwWHx5rkiRxFu0z8I1r9USh3%2BAk%2BJyeg%3D) 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 long[^1]! 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:

- [sass](https://www.npmjs.com/package/sass) - Compile SCSS into CSS
- [pako](https://github.com/nodeca/pako) - GZip Implementation
- [prism](https://prismjs.com/) - Web native syntax highlighting

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

- There are no children inside a `<textarea />` element, to modify styles of written content you must first mirror the content to another element. Syncing the display & scroll state of these two elements to create a seamless editing experience was a bit of a challenge. However once they were synced up, prism did a majority of the heavy lifting.
- Compressing the code into a URL safe string was quite difficult. Initially I implemented an LZ77 compressor which worked quite well with plain strings however it really only lowered string size by 5-10%. I was told to look into GZip, this implementation seemed much too complex to do myself, so I opted into using an existing solution. The most popular library I could find called pako only worked with `UInt8Buffer`'s which I had never worked with before. It was interesting to work with the `string` `->` `UInt8Buffer` and back conversion process.

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.

<iframe height="600px" width="100%" src="/sandbox.html?data=eJxtUlFv2jAQ%2Fiu3dFOCBGn20GlKoQ9UrbRp2sO0h1aAVBNfiDfHjmwHyhD%2FfWebwkonEWF%2F5%2B%2Fuu%2B9ulzSulUmZjLlYQyWZtZN5sha4mSc3czV34%2B7mZyMs0A%2FbJXKOHIQCpkDcG9biu%2FFld3qIwLUD2%2Bhecqi1lHoDW90baHVvEbSq0N8BFVtKhK9szWxlROdOabwOwUlEoJCK8SVBFIv%2FyTCprCXBuRcJO8%2FptBVOaFWCQcmcWOO1h5f6eWTFH6FWJSy14WhGBMUQq36vjO4VL%2BGirusANihWjSvhY1F8CEDHOA%2Fsz12k6TWamnoqoRHkhJqrPcHqInZ3poUtrZa9i1qc7kq4OuSVWLvTbSO4a6jqp0ORo4wX4LXYojg0FxoyjIveHjXvyZ5f3p1KK%2Bui6%2FdhDGhgQsOp%2BhaVy1fo7iT643T7hWdHsweUI1KDuxOY5Xme%2FYdmp9tbvyzfaQWy1D9OB4PFrFh4ccrfczLvbk1PvwnrUKHJ0lCkJRPTIWToYwOY3ETfTlWnvlNmBFqqHzJR2QDSLG6lINoPrFw2CD6cuC%2BzfyRaSJ5X4fEjjM7y5tvrt7SHM9rDW9qz723uXrmaMyVa5jCbhTYOk356vzvK2XfPT0OIwTj5f6IPPupj%2B8UQDhl4b1hcoauiGEasFlKWkNbabJjhNj3AyGxY0JQOOBIqDakGtAj00S7YTgpH61D4syOZSTkLl%2Fgt9n8B2mlsgg%3D%3D"></iframe>

[^1]: [https://stackoverflow.com/a/417184/3673022](https://stackoverflow.com/a/417184/3673022)