Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Sample Plugin

This sample smart-mirror plugin is intended to provide a working sample, and show how the parts fit together.

note smart-mirror Version 0.27 and up auto loads plugins, and the plugin location configuration (bottom of the confiuration web page) will determine where the plugin content (if any) is displayed

plugin files

  • config.schema.json - optional maybe

    defines the configuration schema for your plugin. All plugins that have configuration requirements, MUST provide this file. which is used to generate the configuration web page to collect, save and provide editing of plugin configuration information.

    You can look at example schema and test your own at see the form documentation here

    • the sample provides a single text string to be used by the plugin. If not supplied, the service provides a default message string is the version that supports translation in smart-mirror v 0.28 and above, note the schema NAME in this file will be used during translation to match items in the locale/language files.
  • index.html - required if there is content to display the html portion for your plugin. this should use angular directives to generate the plugin content

    • the sample plugin uses this to display the text string managed by the controller

    with sm you build the html in advance, using angular directives to dynamically do whatever, show/hide/ expand table, ... whatever,
    and put the DATA in the modules 'scope' (in the controller) and then angular updates the DOM ..

      so the plugin doesn't know ANYTHING about the presentation side at all..  MVC
      u can change the layout of the presentation by updating the external  plugin/index.html and the code works the same
  • controller.js - required for mgmt of any data displayed All of the angular controller logic (data binding) for your plugin. It is acceptable to write Node here.

    • The controller requests info from the service, and places that in the scope data that the index.html will access to display
  • service.js - optional, typically used for gathering data should your plugin need an angular service

    • the service accesses the configuration data for this plugin and returns a text string to the caller
  • plugin.css - optional if you want to customize the look and feel of your plugin. The Cascading StyleSheet file dedicated to this plugin.

  • locales/*.json
    this folder contains the files used for translation of the UI and for the config UI each locale ??.json file has the same three parts

    1. the schema name matching the config.schema.json (if any)

    2. a section under the schema, 'config', which contains the keys and strings of the translated items for the config screen. it is recommended to key the top level title of the schema not translated to keep a consistent placment in the config output across all the languages.. the schemas are sorted alphabetically, except for explicit ordering in the form section

    3. an optional key to identify items belonging to this plugin. this is an arbitrary string. that would be used in the display of any content on the smart-mirror display (usually field labels) these could be included under the schema, item 1, separately from the config section. the light plugin has a lot of text used to display

    4. the commands, section which contains a group of objects with three defined tags

      1. voice voice is the words the user says to invoke this command

         the syntax of the voice string is, for example from the spotify plugin<br>
         "(tell) **spotify** (to) **play** (\*query)",<br>      
         (tell), (to) and (*query) are optional.
         the required words are  **spotify play** <br>
         **(*query)** returns any other words to the function handler callback assigned for this command
      2. text the sample voice required for this command

      3. description the text description of what this command will do

      2 and 3 are the items added to the 'What Can I say' list for user information.

      the fitbit plugin locales have no commands, and the timer plugin locales have no config section


  1. file Installation
    * cd to smart-mirror/plugins
    * then git clone
      this will create a folder named samplePlugin
  2. configuration         
    * after starting smart-mirror, open the configuration app
      and you will see the Sample Plugin heading.
    * expand the heading to expose the single entry field

    **Message string**
    enter some text to be displayed

  3. output placement
    by default, smart-mirror adds new plugins to the middle_center area.

    * expand the **Plugin location Settings section**
    * click the + sign to create a new entry
    * use samplePlugin for the plugin name (match the folder name created by git clone)
    * select a location from the Location dropdown
    * click the Active checkbox on
    * then press submit to save and active these changes


smart-mirror uses a number of open source projects to work properly:

  • AngularJS - HTML enhanced for web apps!
  • node.js - evented I/O for the backend
  • jsonform - awesome web-based text editor




sample smart-mirror plugin






No releases published


No packages published