About Us
A simple “About Us” area for a hypothetical organization that generates a home page and a set of team member pages from a data file.
All City Someday
A photo blog backed by Google Drive: photos saved to a shared Google Drive folder will appear on the site.
Aventour Expeditions
A travel site for an adventure trekking company. Showcases the use of a different template language (Handlebars), the transformation of markdown with front matter into HTML, and the creation of an image gallery that shows all the photos in a given folder.
Benjamin Kenawell’s Blog
A personal site with a blog, resume, portfolio, links, and a Now page. The page templates are defined in the Liquid template language, supported via a custom file extension handler. In his post, Migrating from Jekyll to Web Origami, he writes, “I’ve had a fun experience with Web Origami.”
Cat Prints Store
A small web storefront with a shopping cart provided by a third-party service designed for use with static sites. This site also features the use of CSS view transitions.
Video tour Visit site View source
Cherokee Myths
A text-focused site with a generated table of contents and full-text search.
Video tour Visit site View source
Jan Miksovsky’s blog
A blog with entries organized by year, with JSON and RSS feeds.
Japan Traverse Hike ebook
In addition to creating websites, Origami can generate other software artifacts like ebooks. This example project generates an ebook using markdown text with images.
Nick Simson’s personal site
Blog, notes, and numerous slash pages for topics like books, radio, and records.
Jim Nielsen’s Notes
Short responses to other people’s writings. Jim also has also written a number of blog posts about making sites with Web Origami. He describes the Origami code he writes as “beautiful and succinct”.
pondlife
A sample blog built from markdown posts, with generated index pages, post pages, and feeds.
Stephan Max
A personal site pulling its images directly from an image CDN, with a two-dimensional home page layout showing categories as columns. In a post covering migrating from Astro to Web Origami, he calls out the “massive support from the small but smart and super helpful community.”
vale.rocks
The personal site of Declan Chidlow, including a blog, a portfolio, photography, and reviews of films, games, and other media. In his post, It’s all just trees with Web Origami, he writes, “Origami is thankfully not magic in the sense that it abstracts things away and does some unknowns behind the scenes that you just have to trust. Instead, it is magic in the sense that it just seems to work.”
Web Origami documentation
The Web Origami documentation site itself has many features. The primary content is defined in markdown with inlined Origami expressions, allowing individual documentation pages to generate SVG diagrams and run code samples in order to incorporate their output. Various navigation elements like a sidebar and top navigation bar are generated from the structure of the content. The site also generates API documentation from JavaScript source files and includes a search feature that indexes all the content.
WESL documentation site
The documentation site for the WebGPU Shading Language (WESL). The site’s Origami definition pulls markdown content from GitHub repositories for the WESL specification and an accompanying wiki, adding navigation and a search feature.