diff --git a/extensions/amp-next-page/1.0/amp-next-page.css b/extensions/amp-next-page/1.0/amp-next-page.css
index 51761a0c20cb..62e7f975c622 100644
--- a/extensions/amp-next-page/1.0/amp-next-page.css
+++ b/extensions/amp-next-page/1.0/amp-next-page.css
@@ -27,6 +27,25 @@
   overflow: visible;
 }
 
+.amp-next-page-default-separator {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  width: 160px;
+  height: 38px;
+  margin: auto;
+  border-radius: 32px;
+  box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.09);
+  background: black;
+  color: white;
+}
+
 /** Fixes collapsing margins when switching between the visible and hidden states */
 .i-amphtml-next-page-document:before,
 .i-amphtml-next-page-document:after {
diff --git a/extensions/amp-next-page/1.0/page.js b/extensions/amp-next-page/1.0/page.js
index c70d2a7c0425..1819d75638f9 100644
--- a/extensions/amp-next-page/1.0/page.js
+++ b/extensions/amp-next-page/1.0/page.js
@@ -53,7 +53,7 @@ export class Page {
     /** @private {?Element} */
     this.container_ = null;
     /** @private {?Document} */
-    this.cachedContent_ = null;
+    this.content_ = null;
     /** @private {!PageState} */
     this.state_ = PageState.QUEUED;
     /** @private {!VisibilityState} */
@@ -193,7 +193,7 @@ export class Page {
    * root has been removed
    */
   resume() {
-    this.attach_(devAssert(this.cachedContent_));
+    this.attach_();
   }
 
   /**
@@ -234,13 +234,14 @@ export class Page {
       .fetchPageDocument(this)
       .then(content => {
         this.state_ = PageState.LOADED;
-        this.container_ = this.manager_.createDocumentContainerForPage(
-          this /** page */
-        );
+        this.content_ = content;
+        return this.manager_.createDocumentContainerForPage(this /** page */);
+      })
+      .then(container => {
+        this.container_ = container;
         // TODO(wassgha): To further optimize, this should ideally
         // be parsed from the service worker instead of stored in memory
-        this.cachedContent_ = content;
-        this.attach_(content);
+        this.attach_();
       })
       .catch(() => {
         this.state_ = PageState.FAILED;
@@ -251,12 +252,11 @@ export class Page {
 
   /**
    * Inserts the fetched (or cached) HTML as the document's content
-   * @param {!Document} content
    */
-  attach_(content) {
+  attach_() {
     const shadowDoc = this.manager_.attachDocumentToPage(
       this /** page */,
-      content,
+      /** @type {!Document} */ (devAssert(this.content_)),
       this.isPaused() /** force */
     );
 
diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js
index 0603f82deb02..d574eb0ee592 100644
--- a/extensions/amp-next-page/1.0/service.js
+++ b/extensions/amp-next-page/1.0/service.js
@@ -23,11 +23,13 @@ import {
   childElementByAttr,
   childElementsByTag,
   isJsonScriptTag,
+  removeChildren,
   removeElement,
   scopedQuerySelector,
 } from '../../../src/dom';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
 import {escapeCssSelectorIdent} from '../../../src/css';
+import {htmlFor} from '../../../src/static-template';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {
   parseFavicon,
@@ -77,6 +79,9 @@ export class NextPageService {
      */
     this.mutator_ = Services.mutatorForDoc(ampdoc);
 
+    /** @private @const {!../../../src/service/template-impl.Templates} */
+    this.templates_ = Services.templatesFor(this.win_);
+
     /** @private {?Element} */
     this.separator_ = null;
 
@@ -380,22 +385,26 @@ export class NextPageService {
    * Create a container element for the document and insert it into
    * the amp-next-page element
    * @param {!Page} page
-   * @return {!Element}
+   * @return {!Promise<!Element>}
    */
   createDocumentContainerForPage(page) {
     const container = this.win_.document.createElement('div');
     container.classList.add(DOC_CONTAINER_CLASS);
+    this.element_.insertBefore(container, dev().assertElement(this.moreBox_));
+
+    // Insert the separator
+    const separatorInstance = this.separator_.cloneNode(true);
+    container.appendChild(separatorInstance);
+    const separatorRenderPromise = this.maybeRenderSeparatorTemplate_(
+      separatorInstance,
+      page
+    );
 
+    // Insert the document
     const shadowRoot = this.win_.document.createElement('div');
     shadowRoot.classList.add(SHADOW_ROOT_CLASS);
     container.appendChild(shadowRoot);
 
-    // Insert the separator
-    container.appendChild(this.separator_.cloneNode(true));
-
-    // Insert the container
-    this.element_.insertBefore(container, this.moreBox_);
-
     // Observe this page's visibility
     this.visibilityObserver_.observe(
       shadowRoot /** element */,
@@ -406,7 +415,7 @@ export class NextPageService {
       }
     );
 
-    return container;
+    return separatorRenderPromise.then(() => container);
   }
 
   /**
@@ -632,7 +641,10 @@ export class NextPageService {
         doc.close();
         return doc;
       })
-      .catch(e => user().error(TAG, 'failed to fetch %s', page.url, e));
+      .catch(e => {
+        user().error(TAG, 'failed to fetch %s', page.url, e);
+        throw e;
+      });
   }
 
   /**
@@ -715,11 +727,17 @@ export class NextPageService {
         'be inside a <script> tag with type="application/json"'
     );
 
-    const pages = tryParseJson(scriptElement.textContent, error => {
+    const parsed = tryParseJson(scriptElement.textContent, error => {
       user().error(TAG, 'failed to parse inline page list', error);
     });
 
-    return user().assertArray(pages, `${TAG} page list should be an array`);
+    const pages = user().assertArray(
+      parsed,
+      `${TAG} page list should be an array`
+    );
+
+    removeElement(scriptElement);
+    return pages;
   }
 
   /**
@@ -731,7 +749,6 @@ export class NextPageService {
    */
   getSeparatorElement_(element) {
     const providedSeparator = childElementByAttr(element, 'separator');
-    // TODO(wassgha): Use templates (amp-mustache) to render the separator
     if (providedSeparator) {
       removeElement(providedSeparator);
     }
@@ -743,9 +760,42 @@ export class NextPageService {
    * @private
    */
   buildDefaultSeparator_() {
-    const separator = this.win_.document.createElement('div');
-    separator.classList.add('amp-next-page-default-separator');
-    return separator;
+    const html = htmlFor(this.getHostNextPageElement_());
+    return html`
+      <div
+        class="amp-next-page-default-separator"
+        aria-label="Next article separator"
+      >
+        Next article
+      </div>
+    `;
+  }
+
+  /**
+   * Renders the template inside the separator element using
+   * data from the current article (if a template is present)
+   *
+   * @param {!Element} separator
+   * @param {!Page} page
+   * @return {!Promise}
+   */
+  maybeRenderSeparatorTemplate_(separator, page) {
+    if (!this.templates_.hasTemplate(separator)) {
+      return Promise.resolve();
+    }
+    const data = /** @type {!JsonObject} */ ({
+      title: page.title,
+      url: page.url,
+      image: page.image,
+    });
+    return this.templates_
+      .findAndRenderTemplate(separator, data)
+      .then(rendered => {
+        return this.mutator_.mutateElement(separator, () => {
+          removeChildren(dev().assertElement(separator));
+          separator.appendChild(rendered);
+        });
+      });
   }
 
   /**
diff --git a/extensions/amp-next-page/1.0/test/test-amp-next-page.js b/extensions/amp-next-page/1.0/test/test-amp-next-page.js
index 97214bacf8fe..0c599dd754d0 100644
--- a/extensions/amp-next-page/1.0/test/test-amp-next-page.js
+++ b/extensions/amp-next-page/1.0/test/test-amp-next-page.js
@@ -19,6 +19,7 @@ import {PageState} from '../page';
 import {Services} from '../../../../src/services';
 import {ViewportRelativePos} from '../visibility-observer';
 import {VisibilityState} from '../../../../src/visibility-state';
+import {htmlFor} from '../../../../src/static-template';
 import {setStyle} from '../../../../src/style';
 import {toggleExperiment} from '../../../../src/experiments';
 
@@ -68,6 +69,10 @@ describes.realWin(
     amp: {
       extensions: ['amp-next-page:1.0'],
     },
+    'with script[type=text/plain][template=amp-mustache]': {
+      templateType: 'script',
+    },
+    'with template[type=amp-mustache]': {templateType: 'template'},
   },
   env => {
     let win, doc, ampdoc;
@@ -84,7 +89,7 @@ describes.realWin(
       win.document.title = 'Host page';
     });
 
-    async function getAMPNextPage(options) {
+    async function getAmpNextPage(options, waitForLayout = true) {
       options = options || {};
 
       const element = doc.createElement('amp-next-page');
@@ -101,33 +106,89 @@ describes.realWin(
         element.appendChild(configElement);
       }
 
+      if (options.separator) {
+        element.appendChild(options.separator);
+      }
+
       if (options.src) {
         element.setAttribute('src', options.src);
       }
 
       doc.body.appendChild(element);
 
+      if (waitForLayout) {
+        await element.build();
+        await element.layoutCallback();
+      }
+
       return element;
     }
 
+    async function fetchDocuments(
+      service,
+      result = MOCK_NEXT_PAGE,
+      urlOrNumber = 1
+    ) {
+      const numPages = typeof urlOrNumber === 'string' ? 1 : urlOrNumber;
+      // Set up the mock request
+      if (typeof urlOrNumber === 'string') {
+        env.fetchMock.get(new RegExp(urlOrNumber, 'g'), result);
+      } else {
+        for (let i = 1; i <= numPages; i++) {
+          env.fetchMock.get(new RegExp(`/document${i}`, 'g'), result);
+        }
+      }
+      // Ask the next page service to fetch the documents
+      for (let i = 1; i <= numPages; i++) {
+        await service.maybeFetchNext();
+      }
+    }
+
     afterEach(() => {
       toggleExperiment(win, 'amp-next-page-v2', false);
     });
 
     describe('inline config', () => {
       it('builds with valid inline config', async () => {
-        const element = await getAMPNextPage({
+        await getAmpNextPage({
           inlineConfig: VALID_CONFIG,
         });
-
-        await element.build();
-        await element.layoutCallback();
       });
 
       it('errors on invalid inline config (object instead of array)', async () => {
-        const element = await getAMPNextPage({
-          inlineConfig: {
-            pages: [
+        const element = await getAmpNextPage(
+          {
+            inlineConfig: {
+              pages: [
+                {
+                  'image': '/examples/img/hero@1x.jpg',
+                  'title': 'Title 1',
+                  'ampUrl': '/document1',
+                },
+                {
+                  'image': '/examples/img/hero@1x.jpg',
+                  'title': 'Title 2',
+                  'ampUrl': '/document2',
+                },
+              ],
+            },
+          },
+          false /** waitForLayout */
+        );
+
+        await allowConsoleError(() =>
+          element.build().catch(err => {
+            expect(err.message).to.include(
+              'amp-next-page page list should be an array'
+            );
+          })
+        );
+      });
+
+      it('errors on invalid inline config (ampUrl instead of url)', async () => {
+        const element = await getAmpNextPage(
+          {
+            inlineConfig: [
               {
                 'image': '/examples/img/hero@1x.jpg',
                 'title': 'Title 1',
@@ -140,32 +201,8 @@ describes.realWin(
               },
             ],
           },
-        });
-
-        await allowConsoleError(() =>
-          element.build().catch(err => {
-            expect(err.message).to.include(
-              'amp-next-page page list should be an array'
-            );
-          })
+          false /** waitForLayout */
         );
-      });
-
-      it('errors on invalid inline config (ampUrl instead of url)', async () => {
-        const element = await getAMPNextPage({
-          inlineConfig: [
-            {
-              'image': '/examples/img/hero@1x.jpg',
-              'title': 'Title 1',
-              'ampUrl': '/document1',
-            },
-            {
-              'image': '/examples/img/hero@1x.jpg',
-              'title': 'Title 2',
-              'ampUrl': '/document2',
-            },
-          ],
-        });
 
         await allowConsoleError(() =>
           element.build().catch(err => {
@@ -173,15 +210,6 @@ describes.realWin(
           })
         );
       });
-
-      it('builds with valid inline config', async () => {
-        const element = await getAMPNextPage({
-          inlineConfig: VALID_CONFIG,
-        });
-
-        await element.build();
-        await element.layoutCallback();
-      });
     });
 
     describe('basic functionality', () => {
@@ -189,14 +217,12 @@ describes.realWin(
       let service;
 
       beforeEach(async () => {
-        element = await getAMPNextPage({
+        element = await getAmpNextPage({
           inlineConfig: VALID_CONFIG,
         });
 
-        await element.build();
-        await element.layoutCallback();
-
         service = Services.nextPageServiceForDoc(doc);
+        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
       });
 
       afterEach(async () => {
@@ -233,12 +259,10 @@ describes.realWin(
       });
 
       it('fetches the next document on scroll', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
         const firstPageFetchSpy = env.sandbox.spy(service.pages_[1], 'fetch');
         const secondPageFetchSpy = env.sandbox.spy(service.pages_[2], 'fetch');
 
-        env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE);
-        await service.maybeFetchNext();
+        await fetchDocuments(service);
 
         expect(firstPageFetchSpy).to.be.calledOnce;
         expect(service.pages_[1].state_).to.equal(PageState.INSERTED);
@@ -254,14 +278,10 @@ describes.realWin(
       });
 
       it('fetches the second document on scroll', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
         const firstPageFetchSpy = env.sandbox.spy(service.pages_[1], 'fetch');
         const secondPageFetchSpy = env.sandbox.spy(service.pages_[2], 'fetch');
 
-        env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE);
-        env.fetchMock.get(/\/document2/, MOCK_NEXT_PAGE);
-        await service.maybeFetchNext();
-        await service.maybeFetchNext();
+        await fetchDocuments(service, MOCK_NEXT_PAGE, 2);
 
         expect(firstPageFetchSpy).to.be.calledOnce;
         expect(service.pages_[1].state_).to.equal(PageState.INSERTED);
@@ -286,7 +306,6 @@ describes.realWin(
           redirectUrl: 'https://othersite.com/article',
           body: MOCK_NEXT_PAGE,
         });
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
 
         await service.maybeFetchNext();
 
@@ -297,13 +316,10 @@ describes.realWin(
       });
 
       it('adds the hidden class to elements that should be hidden', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
-
-        env.fetchMock.get(
-          /\/document1/,
+        await fetchDocuments(
+          service,
           `${MOCK_NEXT_PAGE} <div next-page-hide id="hidden" />`
         );
-        await service.maybeFetchNext();
 
         expect(
           service.pages_[1].document.getElementById('hidden')
@@ -311,20 +327,18 @@ describes.realWin(
       });
 
       it('replaces elements with their most recent instance', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
-
-        env.fetchMock.get(
-          /\/document1/,
-          `${MOCK_NEXT_PAGE} <div next-page-replace="replace-me" instance="1" />`
+        await fetchDocuments(
+          service,
+          `${MOCK_NEXT_PAGE} <div next-page-replace="replace-me" instance="1" />`,
+          '/document1'
         );
-        await service.maybeFetchNext();
         service.pages_[1].setVisibility(VisibilityState.VISIBLE);
 
-        env.fetchMock.get(
-          /\/document2/,
-          `${MOCK_NEXT_PAGE} <div next-page-replace="replace-me" instance="2" />`
+        await fetchDocuments(
+          service,
+          `${MOCK_NEXT_PAGE} <div next-page-replace="replace-me" instance="2" />`,
+          '/document2'
         );
-        await service.maybeFetchNext();
         service.pages_[1].relativePos = ViewportRelativePos.INSIDE_VIEWPORT;
         service.updateVisibility();
         service.pages_[1].relativePos = ViewportRelativePos.OUTSIDE_VIEWPORT;
@@ -341,14 +355,10 @@ describes.realWin(
       });
 
       it('removes amp-analytics tags from child documents', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
-
-        env.fetchMock.get(
-          /\/document1/,
+        await fetchDocuments(
+          service,
           `${MOCK_NEXT_PAGE} <amp-analytics id="analytics1"></amp-analytics>`
         );
-        await service.maybeFetchNext();
-
         expect(service.pages_[1].document.getElementById('analytics1')).to.be
           .null;
       });
@@ -359,14 +369,12 @@ describes.realWin(
       let service;
 
       beforeEach(async () => {
-        element = await getAMPNextPage({
+        element = await getAmpNextPage({
           inlineConfig: VALID_CONFIG,
         });
 
-        await element.build();
-        await element.layoutCallback();
-
         service = Services.nextPageServiceForDoc(doc);
+        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
       });
 
       afterEach(async () => {
@@ -374,12 +382,9 @@ describes.realWin(
       });
 
       it('recursively parses pages and avoids loops', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
-
         expect(service.pages_.length).to.equal(3);
 
-        env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE_WITH_RECOMMENDATIONS);
-        await service.maybeFetchNext();
+        await fetchDocuments(service, MOCK_NEXT_PAGE_WITH_RECOMMENDATIONS);
 
         // Adds the two documents coming from Document 1's recommendations
         expect(service.pages_.length).to.equal(5);
@@ -392,13 +397,9 @@ describes.realWin(
       });
 
       it('unloads pages and replaces them with a placeholder', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
         const secondPagePauseSpy = env.sandbox.spy(service.pages_[2], 'pause');
 
-        env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE);
-        env.fetchMock.get(/\/document2/, MOCK_NEXT_PAGE);
-        await service.maybeFetchNext();
-        await service.maybeFetchNext();
+        await fetchDocuments(service, MOCK_NEXT_PAGE, 2);
 
         const {container} = service.pages_[2];
         expect(container).to.be.ok;
@@ -435,16 +436,12 @@ describes.realWin(
       });
 
       it('reloads pages and removes the placeholder', async () => {
-        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
         const secondPageResumeSpy = env.sandbox.spy(
           service.pages_[2],
           'resume'
         );
 
-        env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE);
-        env.fetchMock.get(/\/document2/, MOCK_NEXT_PAGE);
-        await service.maybeFetchNext();
-        await service.maybeFetchNext();
+        await fetchDocuments(service, MOCK_NEXT_PAGE, 2);
 
         const {container} = service.pages_[2];
         expect(container).to.be.ok;
@@ -479,6 +476,143 @@ describes.realWin(
       });
     });
 
+    describe('default separators', () => {
+      let element;
+      let service;
+
+      beforeEach(async () => {
+        element = await getAmpNextPage({
+          inlineConfig: VALID_CONFIG,
+        });
+
+        service = Services.nextPageServiceForDoc(doc);
+        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
+      });
+
+      afterEach(async () => {
+        element.parentNode.removeChild(element);
+      });
+
+      it('adds a default separator to for the host page', async () => {
+        await fetchDocuments(service, MOCK_NEXT_PAGE_WITH_RECOMMENDATIONS);
+
+        expect(service.pages_[1].container.firstElementChild).to.have.class(
+          'amp-next-page-default-separator'
+        );
+      });
+
+      it('adds a default separator between embedded pages', async () => {
+        await fetchDocuments(service, MOCK_NEXT_PAGE, 2);
+
+        expect(service.pages_[2].container.firstElementChild).to.have.class(
+          'amp-next-page-default-separator'
+        );
+      });
+    });
+
+    describe('custom and templated separators', () => {
+      let element;
+      let service;
+      let html;
+
+      beforeEach(() => {
+        html = htmlFor(doc);
+      });
+
+      afterEach(async () => {
+        element.parentNode.removeChild(element);
+      });
+
+      it('renders a custom separator correctly', async () => {
+        const separator = html`
+          <div separator>
+            Custom separator
+          </div>
+        `;
+
+        element = await getAmpNextPage({
+          inlineConfig: VALID_CONFIG,
+          separator,
+        });
+
+        service = Services.nextPageServiceForDoc(doc);
+        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
+        await fetchDocuments(service, MOCK_NEXT_PAGE, 2);
+
+        expect(
+          service.pages_[1].container.firstElementChild.innerText
+        ).to.equal('Custom separator');
+        expect(
+          service.pages_[2].container.firstElementChild.innerText
+        ).to.equal('Custom separator');
+      });
+
+      it('correctly renders a templated separator', async () => {
+        const separator = html`
+          <div separator>
+            <template type="amp-mustache">
+              <div class="separator-content">
+                <span class="title">{{title}}</span>
+                <span class="url">{{url}}</span>
+                <span class="image">{{image}}</span>
+              </div>
+            </template>
+          </div>
+        `;
+
+        element = await getAmpNextPage({
+          inlineConfig: VALID_CONFIG,
+          separator,
+        });
+
+        service = Services.nextPageServiceForDoc(doc);
+        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
+        const templateRenderStub = env.sandbox
+          .stub(service.templates_, 'findAndRenderTemplate')
+          .onFirstCall()
+          .resolves(
+            html`
+              <span>Rendered 1</span>
+            `
+          )
+          .onSecondCall()
+          .resolves(
+            html`
+              <span>Rendered 2</span>
+            `
+          );
+
+        await fetchDocuments(service, MOCK_NEXT_PAGE, '1');
+        expect(templateRenderStub).to.have.been.calledWith(
+          env.sandbox.match.any,
+          {
+            title: 'Title 1',
+            url: '',
+            image: '/examples/img/hero@1x.jpg',
+          }
+        );
+        await fetchDocuments(service, MOCK_NEXT_PAGE, '2');
+        expect(templateRenderStub).to.have.been.calledWith(
+          env.sandbox.match.any,
+          {
+            title: 'Title 2',
+            url: '',
+            image: '/examples/img/hero@1x.jpg',
+          }
+        );
+
+        const template1 = service.pages_[1].container.querySelector(
+          '[separator]'
+        );
+        const template2 = service.pages_[2].container.querySelector(
+          '[separator]'
+        );
+
+        expect(template1.innerText).to.equal('Rendered 1');
+        expect(template2.innerText).to.equal('Rendered 2');
+      });
+    });
+
     describe('remote config', () => {
       // TODO (wassgha): Implement once remote config is implemented
     });
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.amp.html b/test/manual/amp-next-page/1.0/amp-next-page.amp.html
index c8d698595508..556b39ee868f 100644
--- a/test/manual/amp-next-page/1.0/amp-next-page.amp.html
+++ b/test/manual/amp-next-page/1.0/amp-next-page.amp.html
@@ -9,6 +9,7 @@
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
+    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
     <script>
       (self.AMP=self.AMP||[]).push(function(AMP){
@@ -19,6 +20,21 @@
       .content {
         padding: 20px;
       }
+      .amp-next-page-default-separator {
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+      .separator-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      .separator-content amp-img {
+        display: inline-block;
+        border-radius: 50%;
+        margin-right: 6px;
+      }
     </style>
 </head>
   <body>
@@ -285,8 +301,13 @@ <h2>Host page</h2>
           }
         ]
       </script>
-      <div amp-next-page-separator>
-        Read more
+      <div separator class="amp-next-page-default-separator">
+        <template type="amp-mustache">
+          <div class="separator-content">
+            <amp-img src={{image}} layout="fixed" height="16" width="16"></amp-img>
+            <span>Next article: {{title}}</span>
+          </div>
+        </template>
       </div>
       <div more-box>
           Here are a few more articles ...
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html b/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html
new file mode 100644
index 000000000000..f628ea2265aa
--- /dev/null
+++ b/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>AMP next page examples</title>
+    <link rel="canonical" href="amps.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
+    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+    <script>
+      (self.AMP=self.AMP||[]).push(function(AMP){
+          AMP.toggleExperiment('amp-next-page-v2', true);
+      });
+    </script>    
+    <style amp-custom>
+      .content {
+        padding: 20px;
+      }
+      .amp-next-page-default-separator {
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+      .separator-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      .separator-content amp-img {
+        display: inline-block;
+        border-radius: 50%;
+        margin-right: 6px;
+      }
+    </style>
+</head>
+  <body>
+    <div class="content">
+      <h2>Host page</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae
+        libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque
+        varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam
+        dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed
+        turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse
+        tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio
+        quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum
+        non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis
+        condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis
+        cursus libero magna imperdiet purus. In condimentum vehicula est, nec
+        varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl
+        at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum.
+      </p>
+      <p>
+        Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus
+        nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique.
+        Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis
+        ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec
+        pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa,
+        malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit
+        felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt.
+        Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad
+        litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum
+        pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus
+        enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non,
+        consectetur enim.
+      </p>
+      <p>
+        Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque
+        ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla
+        nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in
+        sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed
+        ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus
+        ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat.
+        Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl.
+        Nulla imperdiet ex at venenatis dignissim.
+      </p>
+      <p>
+        Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor
+        ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae
+        tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum,
+        felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius
+        in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium
+        et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis
+        pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus.
+        Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id
+        imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris
+        vitae convallis orci. Mauris sodales faucibus nulla vitae posuere.
+      </p>
+      <p>
+        Donec vehicula nisi eget metus blandit, at semper nunc porttitor.
+        Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies
+        scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat
+        rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa.
+        In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa,
+        sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis,
+        condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non
+        blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin
+        felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci
+        gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis
+        quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit
+        rhoncus. Fusce commodo risus id sapien ultrices vehicula.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae
+        libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque
+        varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam
+        dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed
+        turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse
+        tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio
+        quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum
+        non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis
+        condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis
+        cursus libero magna imperdiet purus. In condimentum vehicula est, nec
+        varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl
+        at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum.
+      </p>
+      <p>
+        Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus
+        nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique.
+        Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis
+        ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec
+        pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa,
+        malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit
+        felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt.
+        Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad
+        litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum
+        pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus
+        enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non,
+        consectetur enim.
+      </p>
+      <p>
+        Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque
+        ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla
+        nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in
+        sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed
+        ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus
+        ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat.
+        Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl.
+        Nulla imperdiet ex at venenatis dignissim.
+      </p>
+      <p>
+        Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor
+        ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae
+        tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum,
+        felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius
+        in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium
+        et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis
+        pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus.
+        Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id
+        imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris
+        vitae convallis orci. Mauris sodales faucibus nulla vitae posuere.
+      </p>
+      <p>
+        Donec vehicula nisi eget metus blandit, at semper nunc porttitor.
+        Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies
+        scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat
+        rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa.
+        In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa,
+        sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis,
+        condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non
+        blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin
+        felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci
+        gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis
+        quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit
+        rhoncus. Fusce commodo risus id sapien ultrices vehicula.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae
+        libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque
+        varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam
+        dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed
+        turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse
+        tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio
+        quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum
+        non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis
+        condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis
+        cursus libero magna imperdiet purus. In condimentum vehicula est, nec
+        varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl
+        at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae
+        libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque
+        varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam
+        dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed
+        turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse
+        tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio
+        quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum
+        non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis
+        condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis
+        cursus libero magna imperdiet purus. In condimentum vehicula est, nec
+        varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl
+        at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum.
+      </p>
+      <p>
+        Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus
+        nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique.
+        Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis
+        ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec
+        pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa,
+        malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit
+        felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt.
+        Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad
+        litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum
+        pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus
+        enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non,
+        consectetur enim.
+      </p>
+      <p>
+        Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque
+        ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla
+        nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in
+        sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed
+        ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus
+        ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat.
+        Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl.
+        Nulla imperdiet ex at venenatis dignissim.
+      </p>
+      <p>
+        Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor
+        ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae
+        tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum,
+        felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius
+        in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium
+        et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis
+        pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus.
+        Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id
+        imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris
+        vitae convallis orci. Mauris sodales faucibus nulla vitae posuere.
+      </p>
+      <p>
+        Donec vehicula nisi eget metus blandit, at semper nunc porttitor.
+        Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies
+        scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat
+        rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa.
+        In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa,
+        sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis,
+        condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non
+        blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin
+        felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci
+        gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis
+        quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit
+        rhoncus. Fusce commodo risus id sapien ultrices vehicula.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae
+        libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque
+        varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam
+        dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed
+        turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse
+        tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio
+        quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum
+        non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis
+        condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis
+        cursus libero magna imperdiet purus. In condimentum vehicula est, nec
+        varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl
+        at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum.
+      </p>
+      <p>
+        Donec vehicula nisi eget metus blandit, at semper nunc porttitor.
+        Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies
+        scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat
+        rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa.
+        In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa,
+        sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis,
+        condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non
+        blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin
+        felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci
+        gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis
+        quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit
+        rhoncus. Fusce commodo risus id sapien ultrices vehicula.
+      </p>
+    </div>    
+    <!-- amp-next-page configuration -->
+    <amp-next-page>
+      <script type="application/json">
+        [
+          {
+            "image": "/examples/img/hero@1x.jpg",
+            "title": "Page 1",
+            "url": "./articles/article-short.html"
+          },
+          {
+            "image": "/examples/img/hero@1x.jpg",
+            "title": "Page 2",
+            "url": "./articles/article-with-fixed.html"
+          },
+          {
+            "image": "/examples/img/hero@1x.jpg",
+            "title": "Page 3",
+            "url": "./articles/article-long.html"
+          }
+        ]
+      </script>
+      <div separator class="amp-next-page-default-separator">
+        <script type="text/plain" template="amp-mustache">
+          <div class="separator-content">
+            <amp-img src={{image}} layout="fixed" height="16" width="16"></amp-img>
+            <span>Next article: {{title}}</span>
+          </div>
+        </script>
+      </div>
+      <div more-box>
+          Here are a few more articles ...
+      </div>  
+    </amp-next-page>
+  </body>
+</html>