Example sites

Created with the Origami language

About Us

Screenshot of https://weborigami.org/demos/aboutUs/

The Origami tutorial leads you through the creation of this simple site that includes a home page and a set of pages for team members generated from a data file. This example also demonstrates the use of a “map” to scale full-size images to a smaller size.

Visit site   View source

All City Someday

Screenshot of https://all-city-someday.netlify.app

A photo blog backed by Google Drive: photos saved to a shared Google Drive folder will appear on the site.

Visit site   View source

Aventour Expeditions

Screenshot of https://aventour-expeditions.netlify.app

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.

Visit site   View source

Cat Prints Store

Screenshot of https://cat-prints-store.weborigami.org

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

Screenshot of https://cherokee-myths.netlify.app

A text-focused site with a generated table of contents and full-text search.

Video tour   Visit site   View source

Jan Miksovsky’s blog

Screenshot of https://jan.miksovsky.com

A blog with entries organized by year, with JSON and RSS feeds.

Visit site

Jim Nielsen’s Notes

Screenshot of https://notes.jim-nielsen.com/

Short responses to other people’s writings. Reads notes from Dropbox via the Origami Dropbox extension and formats them as a single page with JSON and RSS feeds.

Visit site   View source

pondlife

Screenshot of https://pondlife.netlify.app

A sample blog built from markdown posts, with generated index pages, post pages, and feeds.

Visit site   View source

Web Origami documentation

Screenshot of https://weborigami.org

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.

Visit site   View source

Japan Traverse Hike ebook

Book cover showing a grassy meadow with an elevated wooden pathway

In addition to creating websites, Origami can generate other software artifacts like ebooks. This example project generates an ebook using markdown text with images.

View source