Playground

How the playground differs from a build

Each tab is a template with a config and a post to match, and each keeps its own edits, so you can look at what another template does and come back to find your work as you left it. Reset this tab appears once you have changed something and puts the original back.

It runs entirely in your browser, so your config and frontmatter stay on your machine. Copy link puts the open tab and everything in it in the URL, so a link is enough to show someone what you made, or to ask why it is doing something unexpected.

The config is JSON here. A project writes colophon.config.ts instead, but every option that shapes an image is the same either way, because resolveConfig takes a plain object. The options that have to be JavaScript all concern finding posts and writing files, which the playground leaves alone.

One consequence is worth knowing about. A post’s own title is used where the props block sets none, so that much needs nothing said twice. Anything else a project maps from its existing frontmatter, such as a description becoming the subtitle, goes through the content.props function. That is JavaScript, so the playground cannot run it: put those fields in meta_img_props here, as the samples do.

The browser has no filesystem, which accounts for one more difference, described in the browser-safe core: PNG export goes through a canvas. The preview is the SVG itself, and Download PNG draws that SVG to a canvas. A build renders through resvg, and can also write WebP, JPEG and AVIF.

Fonts are not one of the differences, though they used to be. This page fetches Outfit and JetBrains Mono, the same faces that draw the images on the home page, and hands them to Colophon exactly as a fonts config would. So the text is measured against real glyphs rather than estimated, and a title wraps and shrinks here where it will wrap and shrink in a build.

Two things follow that are worth knowing. The faces are also inlined into the SVG, because an image in an <img> cannot reach the page’s stylesheets, which is why the preview is a good deal larger than the config that made it. And a config copied out of here renders in these fonts only if the project it lands in configures them too; left alone, a build names the family and lets the machine supply it.

Layout is otherwise the same either way. Colophon measures the text and positions it itself, so what you see here is where the words will be.

When you have something you like, install the package and paste the config in. Images you make here are yours to use: Colophon is Apache 2.0.