grant / awesome-polymer

A collection of awesome Polymer resources.

Awesome Polymer

A collection of awesome Polymer resources

⚠️ = based on an older Polymer version

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
• Build a real-time to-do app
• Taming Polymer with SystemJS and TypeScript Part 1
• Aurelia Integration
• Polymer 3.0 Preview — Building a mini card game

Articles

• Encapsulated Routing with Elements
• Building web components using ES6 classes
• Write 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
• Polymer for the Performance-obsessed
• What is shady DOM
• Using Polymer webcomponents with Angular JS
• Upgrading to 1.0 bitHound Blog
• Setting up your Production-ready Polymer 1.0 Application Development
• 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
• 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

Podcasts

• Polymer Podcast

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
• Snippets for Sublime Text editor
• 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