JSpark Website

My Role

As the developer of the website, the most interesting part of my work was how the site shows the app. There are no screenshots or screen recordings on it. Every app window is rebuilt in HTML and CSS from the app's own source code, with the same colours, fonts, icons and syntax highlighting. At build time, the site loads the app's CodeMirror grammars to highlight code exactly as the editor does, and sync scripts copy the app's design tokens and settings text, so a preview can be brought up to date when the app changes instead of being captured again by hand.

On top of these windows, I built a small animation system that plays back real recordings made by the app's own tracer. When the site shows code being replayed step by step, with the value of each variable at each step, those values are the ones the app actually produced. Because the windows are real markup, they stay sharp at any size, follow the visitor's light or dark preference, and weigh far less than a video. The same previews are also rendered to images to make each page's share image.

The hero background, a field of dots moved by slow waves, is drawn in WebGL, so the page keeps its motion without heavy images behind the text. The documentation, around 60 pages, has its own layout with full-text search from Pagefind, and the changelog is generated from the app's GitHub Releases.

The site is built with Astro, so every page ships as plain HTML and only the animated parts load JavaScript. It uses the same Tailwind design tokens as the app, which keeps the website, the docs and the app windows looking like one product. For search engines and AI tools, the structured data, the llms.txt file and the pages all read from one shared content source, so they cannot drift apart. It is hosted on Cloudflare Workers, with a staging site behind Cloudflare Access where every change is checked before it goes live.

Challenge

The main challenge was keeping the website true to an app that changes every week. A screenshot is out of date after the next release, and a hand-drawn mock-up is never quite right. Rebuilding the windows from the app's source solved this, but it meant writing tooling to copy the app's styles and grammars at build time, and to capture the running app and compare it with each preview, so that a difference shows up before a visitor sees it.

The other challenge was showing JSpark's main feature, replaying code backwards as well as forwards, on a static website. Driving the HTML windows with real tracer recordings let the site show it working, accurately, without a video and without running any code in the visitor's browser.