Grab the kit from morphing.cloud. This link always hands you the latest build:
Unzip it and pull out hypercard-embed.js. That one file is the whole player (the
WebAssembly runtime is baked right inside it), and it's the only piece you have to upload. The rest of
the kit is just a copy-paste example and a couple of helper scripts you can ignore for now.
On a Mac, right-click your stack in the Finder and choose Compress. That gives
you a .zip, and that single .zip is what you host.
Why zip it? A HyperCard stack keeps its fonts, icons, and other bits in a hidden "resource fork"
alongside the main file. Compressing bundles both parts into the one .zip, so nothing
gets lost.
If your stack arrived as a .sit or .hqx file, unpack it first with
The Unarchiver, then compress
it as above.
Upload two files to your site:
hypercard-embed.jsMyStack.zipThey can sit right next to your index.html, the page people see when they visit
your site.
Neocities works great for this, and so does any web host.
In your HTML, load the script once, then drop in a <hypercard-stack> tag pointing
at your zip. That's the whole thing, no extra code:
<script src="hypercard-embed.js"></script>
<hypercard-stack stack="MyStack.zip"></hypercard-stack>It sizes itself to your stack automatically. A classic card is only 512x342 pixels, though, which looks tiny on a modern screen, so you'll probably want to scale it up. Give it a width and it grows, staying crisp:
<hypercard-stack stack="MyStack.zip" style="width:800px"></hypercard-stack>The tag fetches the zip, unpacks it right in the browser, and paints the first card, all from that one file. This is how the live demo runs its stack.
Runtime by morphing.cloud