Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

Handlebars Paginate helper


npm Version Dependency Status


npm install handlebars-paginate


Register the handlebars-paginate helper with Handlebars:

var Handlebars = require('handlebars');
var paginate = require('handlebars-paginate');

Handlebars.registerHelper('paginate', paginate);

Then when rendering your template, specify the pagination details:

var htmlString = myTemplate({
  /* ... any other context data for your template here */

  // Pagination data:
  pagination: {
    page: 4,       // The current page the user is on
    pageCount: 10  // The total number of available pages

Use paginate blocks in your template to build your pagination markup:

<div class="pagination pagination-centered">
    {{#paginate pagination type="first"}}
      <li {{#if disabled}}class="disabled"{{/if}}><a href="?p={{n}}">First</a></li>
    {{#paginate pagination type="previous"}}
      <li {{#if disabled}}class="disabled"{{/if}}><a href="?p={{n}}">Prev</a></li>
    {{#paginate pagination type="middle" limit="7"}}
      <li {{#if active}}class="active"{{/if}}><a href="?p={{n}}">{{n}}</a></li>
    {{#paginate pagination type="next"}}
      <li {{#if disabled}}class="disabled"{{/if}}><a href="?p={{n}}">Next</a></li>
    {{#paginate pagination type="last"}}
      <li {{#if disabled}}class="disabled"{{/if}}><a href="?p={{n}}">Last</a></li>

NOTE: The specific names paginate and pagination are unimportant and may be renamed to anything you like. The only important thing is to be consistent and use the correct names in each JavaScript/Handlebars context.

Available Options

To configure current pagination state, provide an options object for handlebars-paginate when calling your template. This object must be passed to the paginate blocks in your Handlebars markup.

NOTE: The key name for the options object may be anything you like, though we've used pagination in the examples. (Number or String)

The current page that the user is on. Starts at 1.

options.pageCount (Number or String)

The total number of pages that are in the collection.

{{paginate}} Helper

Renders the block for one or more pagination buttons, providing extra pagination context to the block being rendered.


  • type (String, Required): The button type. One of "first", "previous", "middle", "next", or "last"
  • limit (Number or String): The maximum number of "middle" buttons to render

Extra Context

  • active (Bool): True for the button associated with the current page. Available to "middle" buttons.
  • disabled (Bool): True if the button should be disabled. Available to First/Previous/Next/Last buttons.
  • n (Number): Page number that the button is associated with. Available to all buttons.


0.1.0 - 2015-07-06

  • Add first and last page types

0.0.3 - 2015-05-20

  • Add bower support

0.0.2 - 2015-05-18

  • Fix type errors with and pagination.pageCount

0.0.1 - 2012-11-16

  • Initial release


MIT License


Pagination helper for Handlebars.






No packages published