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:

Include a folder

The most basic way to include a folder in your Origami site definition is with a path.

site.ori

{
  // Expose everything in the src/assets folder as the `/stuff` route
  stuff: src/assets
}

$ ls src/assets
favicon.ico     main.css
$ ori Tree.paths site.ori
- stuff/favicon.ico
- stuff/main.css
$

Tree.paths lists all routes in the site.

Serve a site

While developing your static site, you can serve it locally with the Origami server.

site.ori

{
  about: {
    index.html: "<h2>About us</h2>"
  },
  index.html: "<h2>Our site</h2>"
}

http://localhost:5000/about/index.html

About us

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