1. Clone the repo and cd in
2. Run git fetch --tags to get all releases
3. Run git checkout [LATEST TAG], ex: git checkout 0.4.2
4. From the root of the project run bower install
5. Start a local server, ex: python -m SimpleHTTPServer
6. Navigate to http://localhost:[YOUR SERVER PORT]

When you run bower install it may ask you to pick a version of a particular dependency. Because the designer is still very bleeding edge and we're constantly fixing bugs, we often recommend you choose the master option if it's presented. You can preserve this resolution by preceding it with a bang "!" symbol. Long term we hope to eliminate the need for this action by making sure all dependencies in designer work with the current tag and do not require resolutions.

1. Add a metadata.html file to your component's repo
2. Add your component as a dependency in designer's bower.json
3. Run bower install to fetch your component
4. Add the path to your metadata.html file to the index.html file

<!-- designer/index.html -->
<script>
  var metadata = [
    '../components/core-elements/metadata.html',
    '../components/more-elements/metadata.html',
    '../components/my-element/metadata.html'  // <-- add your element here
  ];
</script>

The metadata.html file instructs the designer on how to work with your component. The metadata.html consists of an x-meta tag that contains:

• A template for your element. The contents of this template are what the user will be dragging onto the stage, so it can be used to stub out a version of your element with default attribute values and inline styles.
• Optional property elements for generating property editors in the Properties panel.
• A templatefor your element's HTML import.

<!-- Example metadata.html -->
<x-meta id="google-map" label="Google Map" group="Google Web Components">

  <template>
    <google-map zoom="18" style="width: 400px; height: 400px; display: block;"></google-map>
  </template>

  <property name="zoom"
            kind="number">
  </property>
  
  <property name="mapType"
            kind="select"
            options="roadmap,satellite,hybrid,terrain">
  </property>

  <!-- Make sure you put your element import last! -->
  <!-- https://github.com/Polymer/designer/issues/59 -->
  <template id="imports">
    <link rel="import" href="google-map.html">
  </template>

</x-meta>

The x-meta element supports the following attributes:

Every element will generate property editors for all of its published properties (anything appearing in the attributes attribute or the publish object), and any attributes defined in its metadata.html template.

The default behavior is to generate string editors for these properties. By using a property element, you may hint to the designer that it should display a more specific editor. Below is a list of all of the currently supported editor types with examples.

A basic string editor

Example:

<property name="username" kind="string"></property>

A basic number editor. Will call Number(value) to insure values are processed correctly.

Example:

<property name="count" kind="number"></property>

A color picker

Example:

<property name="color" kind="color"></property>

A checkbox

Example:

<property name="showMapMarker" kind="boolean"></property>

A dropdown for selecting from a list of options.

Example:

<property name="sizes" kind="select" options="small,medium,large"></property>

A textarea for long form text content.

Example:

<property name="description" kind="text"></property>

A textarea for JSON content.

Example:

<property name="user" kind="json"></property>

A range slider

Example:

<property name="total" kind="range" min="1.0" max="5.0" step="0.1" defaultValue="3.5"></property>