Polymer Logo Home Start Get started Try Polymer Install Polymer 2.x 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 About this release What's new in 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 Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements Publish your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community

Polymer App Toolbox is a collection of components, tools and templates for building Progressive Web Apps with Polymer. App Toolbox features:

  • Component-based architecture using Polymer and web components.
  • Responsive design using the app layout components.
  • Modular routing using the <app-route> elements.
  • Localization with <app-localize-behavior>.
  • Turnkey support for local storage with app storage elements.
  • Offline caching as a progressive enhancement, using service workers.
  • Build tooling to support serving your app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1.

You can use any one of these components separately, or use them together to build a full-featured Progressive web app. Most importantly, each component is additive. For a simple app you may only need app-layout. As it gets more complicated, you can add routing, offline caching, and a high-performance server as required.

Hybrid compatible. The Toolbox elements and behaviors are available as hybrid versions, which can be used with both Polymer 1 and Polymer 2. Use the 2.0 branch of the elements when working with 2.0 Release.

To get a feel for these components in action, you can try out one of the two demo apps:

  • Shop. Shop is a full-featured e-commerce progressive web app demo built using the Toolbox. Read about how it's built in Case study: the Shop app.

  • News. News is a full-featured progressive web app demo like Shop, but focusing on publishing. Read about how it's built in Case study: the News app.

To get started with the App Toolbox, visit Build an app with App Toolbox.

Or read on to find out about Responsive app layout.

Build an app

Responsive app layout