Creating JSPen: A codepen-like editor that stores pages in URLs

No server, no backend, no problem!

Sunday, a neat project was posted to Hacker News titled Show HN: Web pages stored entirely in the URL. This led me to create https://jspen.co/: A codepen-like editor for creating serverless webpages that exist entirely in a URL.

I originally conceived this as a simple, static CodePen clone, but I felt the “publishing” of pages as URLs was an interesting idea. So I decided to present that aspect of it front and center, even though it wasn’t really the point of the project at the beginning.

I quickly forked the project and submitted a few tiny Pull Requests. Not sure why, but I really enjoyed hacking on the concept, and over the next two days, I had pretty much turned it into a surface-level clone of Codepen (going much further would be too ambitious).

One quick pen I hammered out in JSPen.co

Improvements / New Features

I quickly added some really basic improvements:

• Unicode support (for Emojis, Asian languages, etc.)
• The ability to include a page title (HTML Title tags) as well as a page author (Meta Author tags)
• Storage of pages in localStorage (so you can save drafts to your own device, like you might in a Codepen account)
• The ability to fork and edit existing pages
• Sharing of the pages on Twitter
• Sharing via Short URL (I built a tiny URL shortner)
• Sharing via QR code
• Ability to delete pens
• A Nice Ace editor w/ Emmet support
• <iframe> sandbox

Branding and Styles

Without stealing anything directly from Codepen, I will say, I might have been somewhat inspired by the aesthetic, if only at a basic level. No code was directly copied or anything like that (their design has actually evolved much farther than this), but I have probably spent a few thousand hours in Codepen, and it didn’t take more than a few minutes to clean up the page to look & feel like Codepen might have looked several years ago.

Picking a name

I searched for domains under a variety of extensions via https://tld-list.com/.

First, I came up with a few ideas, like:

• nocodep.in
• htmlp.in
• urlpag.es
• permapag.es
• permpag.es
• ipag.es
• hpag.es
• mpag.es
• opag.es
• rpag.es
• upag.es
• wpag.es

Before finally settling on jsPen.co. There was a sale on .co domains, which might have pushed me in this direction more than anything!

The Logo

I didn’t spend a lot of time on the logo. I initially thought I would skip creating one at all, until I realized that would mean no pages would have a Favicon. So, I created a minimal logo out of a freely-licensed Pen SVG and the letters JS.

Testing it all out

Next, I pulled in a bunch of my pens from Codepen, and a few from the homepage (with author credit, of course!). This got me to the point where I had completely populated my My Pens page, and I was sure that you would be able to store a large number of pens in localStorage, as well as ensuring there weren’t any major bugs (I did find a few).

My First Few Pens

Sharing Pens on Twitter

I built a small feature that allows users to share pens on Twitter, using the Twitter Intents API: http://twitter.com/intent/tweet

Creating a Homepage without a Backend

Now for the truly difficult part: I wanted to create a homepage, without a server backend!

Thankfully, I stumbled upon the Twitter Fetcher library. This can pull tweets from a single account, without the need for a backend server.

jasonmayes/Twitter-Post-Fetcher

I quickly registered a new Twitter account, @htmlpins, which people could tweet at with their creations. If I retweeted it from this account, it would appear on the homepage.

And a quick proof of concept:

My first attempt at using the twitter-fetcher API

This resulted in this homepage (just a variation of the My Pens page)

Sharing the Site

Next, I spent a bit of time sharing the site around the web.

1. https://www.reddit.com/r/SideProject/comments/c8wd7x/jspen_free_permanent_web_pages_stored_in_the_url/
2. https://www.producthunt.com/posts/jspen-permanent-page-maker-codepen-like
3. Hacker News
4. Indie Hackers
5. Friends & Family

Improving the URL Shortener

One of the biggest drawbacks of the original project was the lack of a good URL shortener with an open API that could be used to shorten very long URLs. So, I created my own, with a very, very minimal backend.

I wanted something that would store long URLs, not much else, and cost almost nothing to operate.

So, here’s how I set it up:

1. Long URLs would be stored in a static BunnyCDN Storage bucket (very similar to AWS S3, but loads cheaper). 1¢ per GB stored and $5 per TB transfered, although I would reduce this with Cloudflare to very little transfer.
2. The plain text files would contain only the URL payload (so it won’t work as a general-purpose URL shortener, only for URLPages).
3. The plain text files will be stored under their md5 hash, to prevent duplicates from duplicate calls (and simplify the storage script).
4. The md5 hash would become the (relatively) short URL. So users would just hit jspen.co/s/#<md5 hash of full page>, which would download a file directly from the path to cdn/<md5>.t (BunnyCDN requires a file extension to enable CORS)
5. With rate limiting, I could write a script that stores the files on BunnyCDN that would take up only a fraction of the resources on one of my tiny Dokku clusters (Under $5/mo)

After setting up proper cache-control headers, CDNs, and creating immutable URLs, basically only the first request uses paid bandwidth, which should make this ridiculously cheap to operate.

This is a Private Repo, but the logic is basically this with some rate limiting on the Cloudflare end:

That’s about it! Thanks for reading!

Meetingroom365.com | @kidgdzilla (Twitter) | @futhey (IndieHackers) | @kidgodzilla (GitHub)