Webgarden tutorial

Webgardens are implementations of an informal little micro-protocol on the web, where you define an HTML file on your own webserver designed to fit in to a 250x250 iframe on other sites.

I first learned about webgardens from this maya.land post, through which I found a webgardens tutorial from miss moss. From that tutorial:

A greenhouse is a page on your site to add your pots. A pot is a 250x250 pixel box that contains a sliver of someone else’s website…. A plant is the actual content of a pot.

It is suggested to use /webgarden.html, but it’s not required.

It seems to me that these webgardens exist in a different part of the Internet from me. I hope everyone involved feels my appreciation from afar, and doesn’t feel like I’m trying to crowd in on their thing or make them too legible.

Example webgardens

Here’s my plot for this website:

You can also see my greenhouse.

Showing plots in your greenhouse

To pot my plant in your greenhouse, use this code:


Webgarden references in Hugo

It’s nice and easy to turn this into a Hugo partial:

<iframe src="{{ . }}" height="250px" width="250px" scrolling="no"></iframe>

Which you can call from a Hugo shortcode:

{{ partial "webgarden.html" ( .Get 0 ) }}

And then call like this in any content:

{{< webgarden "https://me.micahrl.com/webgarden.html" >}}

Tips for making your own webgarden

  • You can use CSS media queries to intermix your webgarden CSS with your site’s CSS, with @media (width: 250px) and (height: 250px) { /* Your CSS here */ }.
  • In Firefox dev tools, you can browse to your webgarden page, enable Responsive design mode, and then provide a custom screen size of 250x250. Unlike setting width=250 and height=250 on your html or body elements, this renders exactly the same as it will when run in the webgardens-standard 250x250 iframe.