⚠️ Bindery is no longer in development. You may be interested in similar open-source projects like paged.js or weasyprint, or commercial offerings like PrinceXML. Also, keep an eye on CSS Paged Media's browser compatibility.

Bindery.js

Intro · Learn · Docs · Examples · About

Bindery.js was a library for designing printable books with HTML and CSS.

At its simplest, Bindery flows content over multiple pages. From there, the designer can create elements that depend on that flow, like running headers, footnotes, tables of contents, and indexes. Bindery also provides print options like bleed, crop marks, and booklet ordering.

If you're designing a website, think about books as an extension of the responsive web. If you're designing a book, express your layouts programmatically, with no need for InDesign.

Getting Started

<div id="content">
  <!-- The contents of your book -->
</div>

<script src="https://unpkg.com/bindery"></script>
<script>
  Bindery.makeBook({ content: '#content' });
</script>

You can also install bindery from npm, or download directly.

npm install --save bindery

Using Rules

const { makeBook, PageBreak, Footnote } = Bindery;

makeBook({
  content: '#content',
  rules: [
    PageBreak({ selector: 'h2', position: 'before', continue: 'right' }),
    Footnote({
      selector: 'p > a',
      render: (el, num) => `${num}: Link to ${el.getAttribute('href')}`;
    }),
  ],
});

For more, see Learn and the Docs.

Developing

When contributing, keep in mind that bindery.js is intended to provide an approachable jumping-off point for HTML-to-Print exploration. Because of this, it is intended to work out of the box as a script tag (without needing to run a dev server, set up a development environment, use preprocessors, or know javascript at all).

npm run build - Updates dist/
npm run test - Runs Jest

To Do

Support for signatures and advanced ordering
Support for RTL languages
Examples for use with blogging platforms
Examples for use with React
Approachable API for writing custom rules

Background