omdb-search Polymer Element - Demo page

omdb-search Polymer Element: Find Movie, Series, and Episode data

What is omdb-search

omdb-search is a custom element, built by Giovanni Orlando using the Polymer JavaScript library, that allows you to easily query for relevant movie, series, and episode data. This element is powered by the Open Movie Database API, and is published under the MIT License.

What is Polymer

Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps. It’s intention is to encourage developers to Use The Platform, instead of relying entirely on third party libraries and tooling.

Tasks it accomplishes

When added to your project, it makes a request to the OMDb API and generates a collection of the Movie, Series, or Episode information found based on the parameters specified by the user.

The element takes as input two main parameters:

  1. Title: Specifies the movie, series, or episode title to query for.

  2. Result Type: Can be either movie, series, or episode.

It also supports three optional parameters:

  • Year: Number representing the year in which the movie, series, or episode was released.

  • Page: Specifies the results-list page number, since OMDb pages search results (10 results per page).

  • API Version: Specifies the OMDb API version number, for future reference when said API updated. Is optional.

omdb-search is completely declarative, meaning that you can easily use this in your element, and have a full understanding of how it behaves.

Getting Started

Make a project directory for your demo and change directories into it:

mkdir omdb-search-demo && cd omdb-search-demo

Create an index.html

touch index.html

Install or Download

Install the component using bower.

bower install omdb-search --save

Or download the .zip file


In that index.html add the following code:

<br /><br /><br />OMDb Search demo
<!-- Load the WebComponents polyfill: -->
<a href=""></a>

<!-- Import the omdb-search web component: -->

<!-- Optionally, import the included omdb-search-theme stylesheet: -->

<!-- Use the element in your app: -->
<h1>Tarzan movies:</h1>

Demo It

Beneath the metal

This element depends on iron-ajax Polymer element, which exposes network request functionality to the user, and makes dealing with REST APIs a smooth experience. iron-ajax is licensed under BSD-3-Clause.

Available on

Future goals

My intentions are to do a full re-write of the element once Polymer (2.x) is officially released. Polymer (2.x) brings features such as:

  • ES 2016 class syntax for defining components

  • Support for native v1 Shadow DOM and v1 Custom Elements APIs

  • Backwards compatibility with apps that rely on Polymer (1.x), meaning that developers can still use these new elements with little to no changes

I am currently developing a node web application that is built on top of this element, and plan on releasing soon to showcase what you can achieve by using it. Once it is released, I will link to it on this blog post so you can check it out.


If you are interested in learning more about this element, make sure you checkout the GitHub repository.


If you enjoyed this blog post or found it helpful in any way, make sure to follow me on Twitter to find out when a new one is available.

Twitter: @giovanni0918

Github: giovanni0918



2 thoughts on “omdb-search Polymer Element: Find Movie, Series, and Episode data

  1. Alex says:

    Nice weblog here! Additionally your web site loads up fast! What web host are you the use of? Can I get your affiliate hyperlink for your host? I want my web site loaded up as fast as yours lol


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s