Use polymer.dart—a Dart port of
build structured, encapsulated, client-side web apps with Dart and
With polymer.dart, you can:
Use Polymer custom elements.
Design your own HTML tags to encapsulate style, structure, and behavior.
Create live, two-way bindings between Dart objects and DOM nodes.
Use emerging web standards—Custom Elements, HTML Imports, Shadow DOM,
The code samples on this page reflect polymer.dart 0.16.
For information about polymer.dart versions, see the
Where to start
You can get a quick start with any of the following:
Polymer Dart Code Lab Follow this if you like to learn by coding.
This code lab walks you through building a single-page admin console and
the custom elements that it requires.
Tutorial: Define a Custom Element Read this if you like a more structured walkthrough.
This tutorial provides a detailed introduction to using polymer.dart
to create custom elements.
Frequently Asked Questions (FAQ) Get the answers to common questions about polymer.dart.
This page has up-to-the-minute information that
hasn’t yet made its way into the documentation.
Still here? Keep reading!
Structuring your app
Apps that use polymer.dart follow the
pub package layout conventions.
As a consequence, the source code for a polymer.dart app
starts with a top directory containing a
pubspec.yaml file and a
web directory contains HTML files that are
entry points—pages that users can visit.
Other files (Dart files, CSS, images, and so on)
can also be in the
pubspec.yaml file has metadata about the app,
such as the pub packages that it depends on.
Learn more at
Imports and Your App’s Directory Structure.
Get polymer.dart from pub.dartlang.org,
the Dart package hosting service.
to depend on the
polymer package and
polymer: ">=0.15.1 <0.17.0"
pub get to download the package and link it into your app.
Using custom elements
Here’s an example of some HTML code
that uses a
from the paper_elements package:
<link rel="import" href="
<paper-input label="Type something..."></paper-input>
<script type="application/dart">export 'package:polymer/init.dart';</script>
For more information, see
Creating custom elements
You can extend the lexicon of HTML with your own custom elements,
as described in
Polymer.dart works well with Dart tools, such as Dart Editor and Pub.
Polymer.dart offers a linter that reports syntax or usage warnings.
Using a special
you can connect the linter to Dart Editor to display warnings directly
at the source.
build.dart file at the root of your project,
and put the following code in it:
Dart Editor runs
build.dart after a file is saved, and
displays warnings from the linter.
Learn more about
it can run across the modern web. The build process also concatenates files
for faster loading.
You can use
entry_points to specify which pages under
the user can navigate to.
(By default, all pages under
web are entry points.)
pub build from the root of your project to generate a
> pub build
required to run the application. You can then deploy the
to your favorite web server.
Learn more about
You can view sample source code that
as well as the source code that implements polymer.dart. Samples
Here are a few places to find polymer.dart sample code:
polymer-dart-patterns Small, useful samples that show how to do things the polymer.dart way.
polymer-spa-example A simple example of a full polymer app with multiple pages.
Learn more about the example at
Building Single Page Apps using
polymer-and-dart-codelab A larger sample, implementing the app featured in
Polymer Dart Code Lab. Polymer.dart
Polymer.dart is open source. You can view and contribute to the source of
polymer.dart and its many component packages on github.
Support and more
We actively encourage your feedback and questions.
Keep an eye on this page and the
for the latest information about polymer.dart.