How I created code sharing feature in my application without using a server

I have a very small repl-ish JavaScript code demonstration platform I call EvilEval, I usually make screencasts on JavaScript and use this tool to demonstrate basic JavaScript. The project is hosted with Github pages.

One of it's feature is the ability to share code as share link or embeds. Here's an embed example:

So, the code needs to be stored somewhere in it's server right? Well, this application runs off Github and does not have any place to store data. All the persistent data are within the embed code itself.

This technique is only feasible for small data (maybe 100 lines of code max). For larger data, you need to use a server.

The data is in the URL itself. encoded as base64 string. Let's explain the technique step by step.

Creating The URL:

The very first thing to do is, creating the URL with the embedded data. let's assume your application is hosted in myawesomeapp.com/. To process the URL easily on the front end,  we will use URL hash. And encode the data in base64. The browser comes with two built-in functions for encoding base64 string. btoa() converts string to base64 string and atob() can decode base64 string. If you are planning to share unicode data you have to use the functions from this URL, because the two built in functions does not support unicode. We will stick with built in functions for simplicity.

To create the URL let's concat the base url, and add the hash with the data at the end:

Now that's your URL with your data. if you use it as <iframe> src, you get yourself embed code :)

But creating the URL with the data is half of the equation. Now let's decode the data from the URL and get back our data.

Getting and using the data from the URL:

Now that you have the URL creator, let's see how we can get our data back from the URL. tl;dr: we need to extract the data from URL and decode the base64 data. The hash of the URL can be accessed from window.location.hash once you have the url hash, you can extract the data in many ways, let's use a relatively easier way:

So, we got back the data from the URL, now you can use it anywhere in the project.

That's how you can persist data in your application without storing it directly in the server.

happy hacking ✌🏼