Origami comics

Click a comic to read it.

Inline paths

Origami is a dialect of JavaScript expressions with inline paths instead of import statements.

// Standard JS
import greet from "./greet.js";

export default {
  "greeting.html": greet("world"),
};

site.ori

// Origami dialect of JavaScript expressions
{
  greeting.html: greet.js("world")
}

The greet.js gets the file’s default export.

Find broken links

As you evolve your site, you might end up with broken links!

https://mycoolsite.com/aboot.html

404 not found ☹️

Blog feeds

Site generators create blog feeds via plugins that are often magic and hard to configure.

ssg.config.json

{
  "title": "Alice's Cool Blog",
  "author": "Alice Andrews",
  "url": "https://alicescoolblog.com",
  "plugins": [
    "blog-feed-plugin": {
      "itemsPerPage": 10,
      "includeImages": true,
      "customFields": [
        "readingTime",
        "tags"
      ],
      "dontIncludeDrafts": true,
      "sortBy": "date",
      "sortOrder": "descending",
      "outputFormats": [
        "rss",
        "jsonFeed"
      ],
      "undisableFunctionality": false,
      "plugins-for-feed-plugin": {
        "fancy-date-plugin": {
          "dateFormat": "MMMM D, YYYY",
          "locale": "en-US",
          "isoDates": false
        }
      }
    }
  ],
}

Configuration sounds easy but becomes an awkward form of coding.

Full-text search

Easily add full-text search to your Origami static site with pagefind!

https://pagefind.app

See pagefind.app

Template documents

An Origami template document is a text file with embedded JavaScript, like a big template literal.

products.ori.html

<h3>Products</h3>
<p>
Current product list as of ${
new Date("2026-01-01 12:00").toLocaleDateString("en-US", { month: "long", day: "numeric" })
}:
</p>

http://localhost:5000/products.html

Products

Current product list as of January 1:

The HTML for these comics is generated from a script with dialogue using Origami itself.