[](https://www.npmjs.com/package/@polymer/iron-demo-helpers)
[](https://travis-ci.org/PolymerElements/iron-demo-helpers)
[](https://webcomponents.org/element/@polymer/iron-demo-helpers)
## <demo-snippet>
`demo-snippet` is a helper element that displays the source of a code snippet and
its rendered demo. It can be used for both native elements and
Polymer elements.
See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-demo-helpers),
[Demo](https://www.webcomponents.org/element/@polymer/iron-demo-helpers/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/iron-demo-helpers
```
### In an html file
```html
Checkbox
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/paper-checkbox/paper-checkbox.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
Checkbox
`;
}
}
customElements.define('sample-element', SampleElement);
```
## <url-bar>
`url-bar` is a helper element that displays a simple read-only URL bar if
and only if the page is in an iframe. In this way we can demo elements that
deal with the URL in our iframe-based demo environments.
If the page is not in an iframe, the url-bar element is not displayed.
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/iron-demo-helpers
cd iron-demo-helpers
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```
## Known Issues
If you add a `script type="module"` inside a `demo-snippet`, the demo will
not be functional on non-module browsers (like IE11). If you need to
use a `script type="module"` and want to display its code in the `demo-snippet`,
a possible workaround is to duplicate the contents of the script outside of the
`demo-snippet` -- that way `polymer serve` (or whatever solution you're using to
ES5-ify the code) will convert the main document `module` to UMD, but will leave the
displayed code untouched. Here is an example:
```html
...
```