www/plugins/index.html

---
layout: plugins
title: Plugin Search
description: Search here for Apache Cordova plugins published on NPM.
---

<div class="row">
  <div class="col-sm-12 text-center">
    <h1>Cordova Plugins</h1>
  </div>

  <div class="col-sm-12">
    <div class="plugins-about">
      <div class="what-is-a-plugin">
        <img src="/static/img/pluggy.png">
        <h2>What is a Cordova plugin?</h2>
        <p>A plugin is a bit of add-on code that provides JavaScript interface to native components.  They allow your app to use native device capabilities beyond what is available to pure web apps.</p>
      </div>
    </div>
  </div>
</div>

<div class="plugins-about-cards">
  <p>Below is a list of Apache Cordova core plugins. Each card contains important information about the plugin.</p>
  <ul>
    <li>The supported platforms are listed below the plugin name, represented by the platform icons.</li>
    <li>If you have any bug reports or want to contribute, you can access the plugin repo by clicking on the GitHub icon.</li>
    <li>If you want to identify what version of the plugin is published, you can access the npm registry by clicking on the npm icon.</li>
  </ul>
</div>

{% cdv_platform inject %}

<div class="plugins">
  {% for plugin in site.data.plugins %}
  <div class="plugin-card">
    <div class="title">
      <div class="title-left">
        <h2>{{ plugin.title }}</h2>
        <div class="plugin-id">{{ plugin.packageName }}</div>
        <ul class="supported-platforms">
          {% for platform in plugin.supportedPlatforms %}
          <li class="platform"><svg class="platform-icon {{ platform }}"><use href="#{{ platform }}" /></svg></li>
          {% endfor %}
        </ul>
      </div>
      <div class="links">
        <a class="mark github" target="_blank" href="{{ site.data.constants.github_org_url_prefix }}{{ plugin.repoName }}"></a>
        <a class="mark npm" target="_blank" href="{{ site.data.constants.npm_package_url_prefix }}{{ plugin.packageName }}"></a>
      </div>
    </div>
    <div class="install-step" onclick="copyToClipboard(this)">
      <span class="text-to-copy">cordova plugin add <b>{{ plugin.packageName }}</b></span>
      <span class="glyphicon glyphicon-copy"></span>
    </div>
  </div>
  {% endfor %}

  <div class="plugin-card third-party" onclick="openNpmjsPluginsSearch()">
    <div class="title">
      Check npmjs for third-party plugins.
      <div class="links">
        <div class="mark npm"></div>
      </div>
    </div>
  </div>
</div>