iron-doc-viewer | Vaadin

Polymer documentation viewer elements

Published on NPM Build status Published on


A collection of elements that display documentation about custom elements, mixins, classes, and more using the JSON descriptor format produced by Polymer Analyzer.

See: Documentation, Demo.

You may also be interested in <iron-component-page>, which composes the iron-doc elements into a more complete documentation browser.


  • <iron-doc-nav> Show a table-of-contents.
  • <iron-doc-viewer> Manage routing and delegate to a child doc element.
  • <iron-doc-element> Show docs about a custom element.
  • <iron-doc-behavior> Show docs about a Polymer behavior.
  • <iron-doc-namespace> Show docs about a JavaScript namespace.
  • <iron-doc-class> Show docs about a JavaScript class.
  • <iron-doc-mixin> Show docs about a JavaScript mixin.



npm install --save @polymer/iron-doc-viewer

In an html file

    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/iron-ajax/iron-ajax.js';
      import '@polymer/iron-doc-viewer/iron-doc-viewer.js';



In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-doc-viewer/iron-doc-viewer.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`

  static get properties() {
    return {
      descriptor: {
        type: Object,
        value: {
          // Analyzer descriptor goes here.

customElements.define('sample-element', SampleElement);


<iron-doc-viewer> handles URL routing to provide permanent addresses for all locations in the documentation tree, including scroll anchor targets.

By default it uses the URL fragment for routing (e.g. docs.html#/elements/my-element#property-foo), in order to support simple static file hosts.

To use the real URL path for routing, set the base-href property to the server mount point, omitting the trailing slash (e.g. /api/docs or empty string for the root path). Note that this requires a host that serves the application from all paths that should be handled by the doc viewer.


The iron-doc elements come with an optional material-design default theme that must be explicitly included as custom style:

<script type="module">
  import '@polymer/iron-doc-viewer/default-theme.js';

  <style is="custom-style" include="iron-doc-default-theme"></style>

The following custom properties and mixins are available for styling:

Custom property Description Default
--iron-doc-accent-color Color for emphasis (e.g. hyperlink hover). #1565c0
--iron-doc-font-body Mixin applied to non-code text. {}
--iron-doc-font-code Mixin applied to code snippets. {}
--iron-doc-title Mixin applied to page titles. {}
--iron-doc-heading Mixin applied to section headings. {}


If you want to send a PR to this element, here are the instructions for running the tests and demo locally:


git clone
cd iron-doc-viewer
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm

Running the tests

polymer test --npm


Link to this version
ImportedReleased 14 September 2018BSD 3-clause "New" or "Revised" License
Framework Support
Polymer 1.0+
Polymer 3.0+
Also supported:
Polymer 2 (3.3.2)
Browser Compatibility
Install with
npm install @polymer/iron-doc-viewer"@4.0.1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 4.0.1


  • @polymer/polymer#^3.0.0
  • @polymer/iron-location#^3.0.0-pre.26
  • @polymer/marked-element#^3.0.0-pre.26
  • @polymer/paper-styles#^3.0.0-pre.26
  • @polymer/prism-element#^3.0.0-pre.26