Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac massa dolor. Etiam luctus maximus arcu, non tincidunt nunc vestibulum fermentum. Pellentesque in eros risus. Mauris nec ipsum dictum, sodales est ut, mattis sem. Donec quis nulla urna. Ut ultricies laoreet diam sed ultricies. Vestibulum convallis sit amet nibh eget aliquam.

Proin in felis efficitur, dignissim erat vel, bibendum turpis. In tristique massa dictum, congue quam vel, dignissim nisl. Curabitur gravida ex quis neque malesuada tincidunt. Pellentesque fringilla, sem nec tincidunt congue, eros metus laoreet ipsum, a dapibus augue quam non ante. Duis maximus, ante nec semper facilisis, nisi felis vestibulum leo, a pharetra nisl urna a mi. Vestibulum augue turpis, euismod non egestas eget, maximus ut justo. Aenean orci felis, fringilla id est eu, fermentum pharetra sapien. Mauris bibendum purus a augue dignissim, in bibendum erat vulputate. Duis ullamcorper maximus quam sit amet ullamcorper.

Cras euismod, dui ornare interdum dapibus, elit odio molestie purus, in imperdiet nisl ligula sed turpis. Integer a bibendum turpis. Fusce in magna mattis, tincidunt urna at, elementum leo. Phasellus molestie neque quis magna sollicitudin sodales. Sed pretium facilisis sapien, nec condimentum arcu volutpat facilisis. Nam ultrices quis mi vitae consequat. Donec vitae diam non tortor congue eleifend. In elementum auctor dapibus.

Nulla facilisi. Nam ultricies leo vitae orci luctus feugiat. Suspendisse augue tortor, tincidunt sed eros ut, pretium facilisis nibh. Integer feugiat elementum placerat. Ut facilisis neque nec felis volutpat condimentum. Fusce turpis dolor, posuere sed volutpat ut, eleifend a lorem. Vestibulum pretium id enim et vestibulum. Nunc consectetur tempor justo et pulvinar. Curabitur non leo eu risus efficitur aliquet at non libero. Suspendisse lobortis, leo tristique gravida hendrerit, magna massa congue dolor, sit amet egestas massa ante a ligula.

Maecenas non malesuada risus, vel placerat ex. Praesent dictum augue quis nibh pharetra sollicitudin. Cras pellentesque sapien sagittis, congue magna nec, efficitur risus. Fusce hendrerit vel libero et aliquet. Cras a imperdiet libero. Vivamus quis sagittis mi, quis elementum massa. Etiam placerat eros at rutrum pellentesque.


                #content {
  font-size: 24px;
  white-space: pre-wrap;

.custom-footer {
  background: cyan;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 40px;

.custom-footer.left-page {
  left: 20px;
  right: unset;


                import bindery from "";

const { makeBook, RunningHeader, createRule } = bindery;

  content: '#content',
  rules: [
      render: (pg) => `Default running header ${pg.number}`,
      render: (pg) => `custom footer ${pg.number}`,
      eachPage: function(pg) {
       if (!pg.myCustomProp) {
         // if myCustomProp isn't set, the page is rendering for the first time, so set up the footer. you can name this whatever you want.  
          const elmt = document.createElement('div');
          pg.myCustomProp = elmt;
        // the innerHTML of the footer is updated multiple times during rendering, as we figure out the final page number.
        pg.myCustomProp.innerHTML = this.render(pg);
        // we can also add an extra class to differentiate left and right pages
        pg.myCustomProp.classList.toggle("left-page", pg.isLeft)