Bidirectional data binding into the page's URL.

Usage no npm install needed!

<script type="module">
  import polymerIronPageUrl from 'https://cdn.skypack.dev/@polymer/iron-page-url';


Build Status

Demo and API Docs


The iron-page-url element manages binding to and from the current URL.

iron-page-url is the first, and lowest level element in the Polymer team's routing system. This is a beta release of iron-page-url as we continue work on higher level elements, and as such iron-page-url may undergo breaking changes.


When the URL is: /search?query=583#details iron-page-url's properties will be:

  • path: '/search'
  • query: 'query=583'
  • hash: 'details'

These bindings are bidirectional. Modifying them will in turn modify the URL.

iron-page-url is only active while it is attached to the document.


While iron-page-url is active in the document it will intercept clicks on links within your site, updating the URL pushing the updated URL out through the databinding system. iron-page-url only intercepts clicks with the intent to open in the same window, so middle mouse clicks and ctrl/cmd clicks work fine.

You can customize this behavior with the urlSpaceRegex.

Dwell Time

iron-page-url protects against accidental history spamming by only adding entries to the user's history if the URL stays unchanged for dwellTime milliseconds.