Polymer

repo: Granze/awesome-polymer
category: Front-End Development related: Web Components · Javascript

Awesome Polymer

<a href="https://www.polymer-project.org"><img src="https://www.polymer-project.org/images/logos/p-logo.png" align="left" height="64" width="92"></a>

A collection of awesome Polymer resources

General resources

• Official Site
• Blog
• Google+ Profile
• Github
• Project All things related to the Polymer project - Roadmap, Code of Conduct, How to Contribute, and more.

Polymer Communities

• StackOverflow
• GoogleGroup
• Twitter
• Google+ Community
• Slack channel

Tutorials/Guides

• Official Codelabs
• Test your elements
• Testing Tips
• Unit Testing
• Deploy with Firebase
• Migration guide
• Using elements
• Flexbox layout with iron-flex-layout
• [Using Neon Animations](https://elements.polymer-project.org/guides/using-neon-animations)
• Build a real-time to-do app
• Taming Polymer with SystemJS and TypeScript Part 1
• Polymer 3.0 Preview — Building a mini card game

Articles

• Encapsulated Routing with Elements
• [Building web components using ES6 classes](https://www.polymer-project.org/1.0/articles/es6.html)
• [Write web components with ES2015 (ES6)](http://www.revillweb.com/tutorials/web-components-with-es2015-es6/)
• Live-reload for Polymer Chrome Apps
• Using Polymer with Flux and a global app state
• [Guitar Tuner with Web audio API](https://aerotwist.com/blog/guitar-tuner/)
• Polymer for the Performance-obsessed
• What is shady DOM
• [Using Polymer webcomponents with Angular JS](http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/)
• Upgrading to 1.0 bitHound Blog
• Dynamically Loading Elements & ES6 Modules
• NET-A-PORTER case study
• Polymer loves Redux
• How to use Polymer with Webpack

Videos

• Polycasts
• Summit 2017
• Summit 2016
• Summit 2015
• The Web Platform Podcast 46: Polymer 1.0
• [Google I/O 2017 - Future, Faster: Unlock the Power of Web Components with Polymer](https://www.youtube.com/watch?v=cuoZenpQveQ)
• Google I/O 2015 - Polymer and modern web APIs: In production at Google scale
• Componentize your app with Polymer Elements
• Learn Polymer 1.0 by Stretch Projects
• Level up Tutorials

Boilerplates

• Polymer boilerplate
• Starter kit Build tools & boilerplate for creating production-quality web apps.
• Seed element
• Polymer Admin Responsive admin dashboard created using Polymer 1.0 and Polymer Starter Kit
• Meteor-Polymer Starter Kit Kickstart a Meteor - Polymer project with MWC packages
• Meteor-Polymer Starter Kit Including Auth

Generators

• Generator Polymer Yeoman generator for Polymer projects, based on the official Starter kit.
• Generator element Yeoman generator to create Custom Elements using Polymer, X-Tag or VanillaJS.

Official Elements

• Elements Catalog
• Iron Iron elements are a set of visual and non-visual utility elements.
• Paper Paper elements are a set of visual elements that implement Google's Material Design.
• Google web components
• Gold The gold elements are built for e-commerce use-cases like checkout flows.
• Platinum Elements to turn your web page into a true webapp, with push, offline, and more.
• Molecules Elements that wrap other javascript libraries.
• App Elements that enable building full web apps out of modular custom elements.
• Data A collection of data/storage related elements.
• Layout A collection of layout related elements.
• [Obsolete] Neon Neon elements implement special effects.

Directories

• Built with Polymer
• Webcomponents.org
• Components Kitchen
• open-elements Open for all elements working with polymer ^1.1

Tools

• App Toolbox App Toolbox.
• Polyserve A simple web server for using bower components locally.
• Polybuild An all-in-one build tool for Polymer apps.
• Polyup A helpful assistant for migrating from Polymer v0.5 to 1.0.
• Polylint Detect errors in your code.
• Polygit The Magic Server serves files directly from github (via cdn.rawgit.com) in a manner that is compatible with HTML Imports natural deduplication feature.
• Polydev DevTool extension.
• Polymer Ready Show an icon in the address bar when it detects some Polymer and Custom components.
• Vulcanize Build tool for HTMLimports and web components.
• Crisper Split inline scripts from an HTML file for CSP compliance.
• [Snippets for Atom editor](https://atom.io/packages/polymer-snippets)
• [Snippets for Sublime Text editor](https://packagecontrol.io/packages/Polymer%20%26%20Web%20Component%20Snippets)
• Synthesis Use Polymer as the view Layer of Meteor.js
• MWC-Layout Control rendering of polymer components.
• WC-Loader. Webcomponents webpack loader
• Polymer Webpack Loader. Polymer webpack loader.
• Polymer CDN. Unofficial CDN for polymer components.
• lit-html HTML templates, via JavaScript template literals.

Testing

• Web components tester Makes testing your web components a breeze!
• Web components tester istambul Istanbul coverage plugin for web-component-tester.
• test-fixture Element that can simplify the exercise of consistently resetting a test suite's DOM.
• iron-test-helpers Utility classes to make testing easier.

Behaviors

• Polymer-Apollo Polymer Apollo GraphQL Integration.
• MWC-Mixin Reactive meteor data source for polymer elements
• MWC-Router Two way bind polymer with Meteor Flowrouter.
• Polymer-Redux Polymer bindings for Redux.

Theming/Styling

• Polymer Themes Free Polymer themes and templates
• Material Palette Palette generator based on Material Design
• Polystyle Wrap existing stylesheets with Polymer's style module system.

Notable projects

Polymer Projects A list of websites and apps built with Polymer

Other awesome resources

If you want more awesome resources, check the awesome list!

License