← max bo

HTML in Hyde

HTML in Hyde is a HTML Freewrite - [an event] in which people get together and write HTML documents. This one is in a park (like the Ontario based HTML in the Park)!

Where?

North-East the Anzac Memorial in Hyde Park, Sydney.

Future events

HTML in Hyde #1 (August 2 2025)

Past events

HTML in Hyde #0 (21st July 2024)

Invitation
Overview / resources / inspiration
Gallery (projects and photos)

# Why?

Ask a mid-20s software engineer "why did you start coding?" - a non-trivial number will say "I was trying to make my Tumblr look cool".
If they're a bit older, they might say Myspace. Older still, Geocities.
I feel like that there's a latent nostalgia for an earlier internet, where people had their own little space that they could express themselves creatively.
So that's what this is - an attempt to, in the words of HTML Energy, show people that the web is still alive [and] to actively make the web more human and handmade. .

# Resources

# for complete beginners

HTML in the Park's HTML Cookbook
Our friends in Ontario have kindly compiled this.
Glitch
A modern browser-based service for website building. It's got extra bells and whistles like a proper page, auto-refresh, and multi-user collaboration. Recommended hosting option
Getting started with the web - MDN
This will guide you through installing basic software, HTML basics, CSS basics, and hosting. You'll get most of this "for free" by using Glitch's default website template.
mmm.page
While I personally really like mmm.page, it's not entirely in the spirit of the event to use it. But it's great for building a fun site really quick. So... use this if you need to leave early, or if you really don't want to touch HTML (😔)

# for those who edited a Tumblr theme once

Neocities
Geocities reincarnated. Very basic web hosting. Might be too spartan for absoute beginners when compared to Glitch.

# for nerds

There's a lot of cool stuff going on in the pure HTML space!

GitHub Pages
GitHub Pages lets you host static websites directly from a canonical username.github.io repo, or any other project repo. For example, my MaxwellBo/maxwellbo.github.io repo maps to maxbo.me, while MaxwellBo/cursors maps to maxbo.me/cursors.
Val Town

If GitHub Gists could run. And AWS Lambda was fun. Val Town is a social website to write and deploy TypeScript. Build APIs and schedule functions from your browser.
Val Town goes crazy. You can trivially server-side render dynamic HTML hydrated from the built in SQLite DB or blob store. It has an inbuilt OpenAI API client. It makes dealing with CORS from other sites and configuring your own easy.
I used Val Town to power the RSVP forms, with the code hosted at val.town/v/mbo/htmlinhydeRSVPs and https://www.val.town/v/mbo/html_in_hyde_1.
Inline rendering with document.currentScript
For quick and dirty rendering of simple dynamic content, you may not need the complexity of a templating language like Handlebars or a PHP backend. [...] You can write this directly in HTML—without IDs, classes, or querySelectors in your JS! Thanks to the document.currentScript property, we can refer to the currently running <script> element directly and go from there.
htmx, htmz, or fixi
htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript.

htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML.

fixi.js is an experimental, minimalist implementation of generalized hypermedia controls
All 3 of these make it much easier to sprinkle in interactivity to a static HTML page.
They both offer the same primitive, swapping, where a HTML response replaces an existing page element.
Swapping can get you pretty far, and pairs well with val.town HTML responses.
NB: htmz is by far the simplest of the 3, only offering swapping.
playhtml (and on GitHub)
playhtml is an open-source library for designing communal internet experiences by enhancing web elements with real-time, collaborative interactivity.
This goes crazy. You can just add import a script and add an attribute like can-move to any element:
```
  
<script
  type="module"
  src="https://unpkg.com/playhtml@latest/dist/init.es.js">
</script>

<div id="couch" can-move style="font-size: 80px">🛋</div>
  
```
and you can click and drag it around and it will get synced!
🛋

playhtml wraps PartyKit which might be a better option if playhtml is insufficient.
@celine/celine
A microlibrary for building reactive HTML notebooks - by me (o˘◡˘o)
surreal
Just a super odd jQuery alternative. It gives you a me() selector that allows you to cram script elements inline into other HTML elements, for maxiumum Locality of Behaviour (how cool!)
It's ideologically cut from the same cloth as htmx, htmz and fixi so it's designed to pair well with them too.
css-scope-inline

Scope your inline style tags in pure vanilla CSS! Only 16 lines. No build. No dependencies.
Built by the same guy as surreal, so they have similar APIs (see me selector).
HTML custom elements

web components [give you] the ability to create custom elements: that is, HTML elements whose behavior is defined by the web developer, that extend the set of elements available in the browser.
React? No need. Use these instead. They're built into the browser.
Also good for avoiding CSS Classes.
htl
A tagged template literal that allows safe interpolation of values into HTML, following the HTML5 spec.
Heavier than HTML custom elements, but lighter than React. Just enough for some light JSON to DOM transformation.
facet

Facet is a single-file web library that allows for the easy, declarative definition of web components. By making use of <template> elements with special attributes, Facet makes it possible to define useful and effective web components with no Javascript boilerplate, so you can focus entirely on the structure and behavior of your component.
stampino

Stampino is a fast and flexible HTML template system, where you write dynamic templates using real HTML <template> tags.
esm.sh, Skypack, UNPKG
Remember when I said NO BUNDLERS ALLOWED in the invitation?
Well you might need some way of importing JS libraries, right?
With the services linked above, you can import libraries directly from a CDN, in a module script, using import syntax. As an example:
```
        
<script type="module">
  import confetti from "https://esm.sh/[email protected]"

  window.confetti = () => confetti.create(document.getElementById('confetti'))()
</script>

<button onclick="confetti()">🎉</button>
<canvas id="confetti" style="border: 1px solid #006400;"></canvas>
      
      
```
I use this a lot in Can we build a reactive article in a single HTML file? if you'd like more examples.

I thought it might be worth mentioning about how to do HTML includes using an <iframe>:

        
<iframe 
  src="/target.html" 
  onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()">
</iframe>

I found this at HTML Includes That Work Today via Seeking an Answer: Why can't HTML alone do includes?

Plain Vanilla
This is a good summary of everything I've listed so far on a nice structured site, plus some cool stuff about routing that I don't think I've covered so far.

# for inspiration

Fortunately, there's a growing community of people who share this nostalgia.
Diagram Website - An internet map has attempted to paint a picture of this community (which is, unsurprisingly, quite decentralized).

Here's a subset of said map that may serve as decent inspiration:

Here's some more links of some stuff I think is cool: HTML in Hyde inspo sites:

I've also compiled an Are.na channel of additional inspiration: HTML in Hyde inspo channels:

Finally, web magazines are a great source of high quality curation: outsider web magazines: