Web Origami

This project explores a new way to build small- to medium-scale websites using a conceptual model and programming language that complement HTML and CSS.

Problem: Creating interesting sites is hard or expensive. Standard HTML and CSS let you define individual pages, but it’s hard to efficiently create a bunch of pages and organize them into a coherent site.

Corporate site hosting services offer nice drag-and-drop editors but impose creative limitations and high monthly costs. You could build something from scratch — if you master a full programming language like JavaScript and a pile of industrial development tools. The web needs better ways to create sizable, expressive sites at low cost and without entanglements.

Origami is designed for you: someone who wants to make a site for yourself or a small organization, someone who’s fine editing HTML and CSS, someone who’s not a professional programmer — or is, but wants to build sites more quickly.

The core idea is to describe the site you want at a high level as concisely as possible. If you can sketch your site like this:

then you can turn that into a small Origami program that orchestrates the creation of your site:

{
  # Stylesheets, etc.
  assets

  # Create a home page listing all the products
  index.html = index.ori(products.yaml)

  # Create a page for each product
  products = @map(products.yaml, products.ori)
}

Origami complements the standard HTML and CSS languages. It lets you describe how you want to transform your data and files into HTML and the other resources for your site. You can create many things without complex programming: a full-text search feature, RSS feeds for blogs, and so on. You can use JavaScript to define parts of your site wherever that makes sense to you.

A high-level site definition is enough to let you immediately view and iterate on your site without complex build tools. When you’re ready to publish, Origami can turn your site into a collection of plain files you can deploy wherever you want, often for free.

View some example sites

Read the Hello World introduction

Make a small site in the tutorial

Inspiration

Web Origami takes its name from the traditional paper folding art of origami, in which you can transform a flat square of paper into an artwork.

The steps may be simple but the end result can be complex and beautiful. In the same way, Origami lets you transform your content into something to share.

Parts of the project

The project includes several separate but interoperable tools and ideas:

• The Origami language lets you concisely define a website or other structured using formulas similar to those in a spreadsheet.
• The ori command-line interface (CLI) lets you use Origami expressions in a command terminal to manipulate files or get resources out of an Origami website in the command line. The CLI is also useful as a general tool in its own right for working with JavaScript in the shell.
• The built-in functions let you perform a number of common website development tasks in the Origami language.
• The async-tree library lets JavaScript programmers use core Origami features in JavaScript applications.
• The conceptual pattern at the foundation of it all lets you represent a wide variety of data types as trees that can be easily traversed and transformed. There’s no code at this level; you can use the ideas in any project.

If you’re interested in trying Origami in a friendly setting, you can participate in a guided usability test and share your feedback. Or join a pair programming session to use these new techniques and tools to collaboratively implement a site. Contact Jan Miksovsky.