Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Home Start Get started Quick tour of Polymer Install the Release Candidate Polymer Feature overview What's new About Polymer 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Advanced tools Services polymer.json specification Node support Resources Browser compatibility Glossary API Reference API Reference App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community
Polymer logo

Polymer 2.0

Unlock the Power of Web Components. Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps.

Polymer Summit 2016

Polymer Summit 2016 is done and dusted! Missed it, or want to replay your favorite talks? You can find all the videos here!

Watch all Summit site Codelabs

Polymer library

Polymer is a lightweight library that helps you take full advantage of Web Components.

With Web Components, you can create reusable custom elements that interoperate seamlessly with the browser’s built-in elements, or break your app up into right-sized components, making your code cleaner and less expensive to maintain.

Polymer sprinkles a bit of sugar over the standard Web Components APIs, making it easier for you to get great results.

About the Library

Polymer App Toolbox

Polymer App Toolbox helps you build and deliver cutting-edge Progressive Web Apps with minimal overhead and payload, by leveraging powerful web platform features like Web Components, Service Worker and HTTP/2.

The Toolbox provides a component-based architecture, responsive layouts, a modular router, localization support, turnkey support for local storage and offline caching, and efficient delivery of unbundled app resources. Adopt these features individually, or use them together to build a full-featured Progressive Web App.

About the Toolbox
illustration of an abstract arrow

Built for speed

Because they let the platform do the heavy lifting, elements built with the Polymer library and apps built with the App Toolbox are blazing fast.

illustration of a computer

For today and beyond

Polymer makes the most of the web platform by using the latest APIs. Polyfills provide support on evergreen browsers for APIs that aren't universal yet.

illustration of bolts

Fully interoperable

Polymer-powered elements are based on standard Web Components APIs, so they work seamlessly with the browser's built-in elements and other Web Components.

Use elements from the catalog


  <!-- Polyfill Web Components support for older browsers -->
  <script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

  <!-- Import element -->
  <link rel="import" href="components/google-map/google-map.html">

  <!-- Use element -->
  <google-map latitude="37.790" longitude="-122.390"></google-map>
          

An element built with Polymer looks and works just like any other HTML element. Simply find an element you’d like to use in your app, import it with an HTML import, and then add the tag to your page.

Browse elements

Create your own elements


  <dom-module id="contact-card">
    <template>
      <style>...</style>
      <slot></slot>
      <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon>
    </template>
    <script>
      class ContactCard extends Polymer.Element {
        static get is() { return "contact-card"; }
        static get properties() {
          return {
            starred: { type: Boolean, value: true }
          }
        }
      }
      customElements.define(ContactCard.is, ContactCard);
    </script>
  </dom-module>
            


  <contact-card starred>
    <img src="profile.jpg" alt="Eric's photo">
    <span>Eric Bidelman</span>
  </contact-card>
            

The Polymer library makes it easy to create your own powerful elements. Give your element some markup and properties, and then use it on a site. Polymer provides useful features like templating and data binding to reduce the amount of boilerplate you need to write.

Build an element

Build Progressive Web Apps


  <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
    <!-- home view -->
    <shop-home name="home" categories="[[categories]]"></shop-home>

    <!-- list view of items in a category -->
    <shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>

    <!-- detail view of one item -->
    <shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>

    <!-- cart view -->
    <shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>

    <!-- checkout view -->
    <shop-checkout
        name="checkout"
        cart="[[cart]]"
        total="[[total]]"
        route="{{subroute}}"></shop-checkout>
  </iron-pages>
            

Use the Polymer App Toolbox to build super-powered Progressive Web Apps. Try the Shop demo app to experience a Progressive Web App in action.

Try the demo Build an app

Who's Using Polymer

BBVA logo Coca Cola logo Comcast logo Google logo ING logo Net-a-porter logo USA-Today logo

Latest news

Welcome 2.0 Release Candidate!

The Polymer 2.0 Release Candidate is available and ready for use.

Polymer News Progressive Web App

The new Polymer News demo progressive web app helps you start building a cutting-edge PWA using Polymer.

webcomponents.org

The new webcomponents.org is now live, with updates and elements from the Web Components community.

Browser Compatibility

The Polymer library and Polymer App Toolbox work in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera).
chrome logo firefox logo internet explorer logo edge logo safari logo opera logo