Sietch

Sietch is a markdown powered static site generator that can render and bundle interactive TypeScript components at build time, without Node.js or npm.

It's designed for people who want to write posts with small amounts of interactive content as examples or demos.

Here are a few reasons you might pick Sietch.

  1. No plugins. No dynamic data sources. No taxonomies. No partials. No data cascades. No generated pages.
  2. Sietch is a standalone binary with everything you need to write markdown, and render components written in TypeScript or JavaScript.
  3. Every single page is rendered through one customisable template file. There are no per-page layouts, partials, or inheritance structures.

There are also some reasons why Sietch might not be a good fit.

If you made it this far, that's probably a good sign. Let's have a look at some

Sietch's component model is based on the islands architecture and takes a significant amount of inspiration from Astro and Slinkity.

That means you can render a TypeScript/JavaScript component into your markdown, and it will be evaluated at build time.

# Static Counter
{{ component "./counter.tsx" (props "count" 10) }}

By default these components aren't 'hydrated' which means that no JavaScript will be sent to the client side along with the markup.

However, you can hydrate individual components at runtime, so that they'll become interactive in browsers.

# Interactive Counter
{{ component "./counter.tsx" (props "count" 10) | hydrate }}

You can also defer loading the JavaScript until the page becomes idle, or the component becomes visible.

# Lazy Islands
{{ component "./counter.tsx" (props "count" 10) | hydrateOnIdle }}

{{ component "./counter.tsx" (props "count" 10) | hydrateOnVisible }}

Sietch supports both Preact and Vanilla components. See the islands reference docs for more information.

V8, esbuild, and esm.sh do most of the heavy lifting behind the scenes.

Sietch keeps record of all the islands it has seen whilst it builds pages, then uses them to create a static rendering bundle, that generates a string of HTML for each island.

If the bundle includes non-local dependencies, they will be resolved, downloaded and cached from esm.sh.

Then the bundle is evaluated inside V8 (a sandbox which has no access to the file system or network) and the resulting HTML is used to fill in the blanks.

Next Sietch creates a bundle for each page with hydrated components. These bundles have code splitting applied, so that you won't end up serving two copies of one common library for two separate pages.

Because your code is run through esbuild, modern JavaScript & TypeScript syntax is also supported, including JSX/TSX, but you'll need to install TypeScript separately if you actually want to type check your codebase.

Sietch is already fairly close to feature complete. Here are some of the things that I plan to add still.

Here are the things that I'm still considering for scope.

Here are some examples of features that are out of scope.