Get the most out of your Magic Mirror with these 5 modules (2024)

When it comes to setting up a smart display in your home or office, Magic Mirror is one of the best options out there, not least because it’s completely free to use. It also comes pre-loaded with a number of modules like a calendar and weather display that are easy to set up and provide a lot of utility. But the world of Magic Mirror doesn’t start and stop with the default modules.

Because Magic Mirror is an open-source ecosystem, there are hundreds of other modules you can add to your setup. That’s a lot to choose from, so in order to save you from the crippling weight of indecision, these are our picks for the five best modules for Magic Mirror.

How to install Magic Mirror modules

Before you can begin to use and enjoy these modules, you’ll need to know how to install them. To start with, you’ll need to access the CLI of the computer or SBC powering your Magic Mirror. I like to use PuTTY and SSH to get the job done, but any method is as good as another. You can find a nearly complete list of third-party Magic Mirror modules on the Magic Mirror GitHub page.

1. Navigate to your Magic Mirror modules directory with the command cd ~/MagicMirror/modules.
2. Next, find the link to the GitHub repository with the module you want to install. Nearly all Magic Mirror modules follow the same naming convention, so the repo will start with “MMM”. For this demonstration we’ll use a module based on one of my programs.
3. From the MagicMirror/modules directory, enter the command git clone https://github.com/sdetweil/MMM-Ternary-clock.git.

   

Once that finishes, the module will be officially installed. The next step is to add it to your config.js file so it can be displayed on the Magic Mirror.

1. Navigate to your config directory by typing in cd ~/MagicMirror/config.
2. Open up your config.js file using whatever editor you prefer (I like sudo nano config.js).
3. Now, you have to manually add the module to your config.js file. The module name is typically the same as the repo name.

   

4. When you’ve made the changes, save the file and restart your Magic Mirror.

5 MMM-TomTomCalculateRouteTraffic

There are a lot of traffic-based modules out there, but if you’re just getting started, MMM-TomTomCalculateRouteTraffic is one of the best. There are a few Google Maps based modules out there, but obtaining a Google API key requires that you hand your payment information over to Google, and I’m not going to do that to you. Instead, we’re going to get a free API key from TomTom and use it instead.

Once you’ve got the module installed, there’s still a bit more work to do. Most importantly, you’ll have to create a developer account with TomTom so you can get a free API key. Once you have that in hand, you’ll need to get the coordinates for where you are and where you want to go. With both of those, you’ll have everything you need to set this up. The TomTom traffic module is capable of even more than this, so be sure to check out its GitHub page for all the details.

I also need to mention that there are dozens of modules for local transit. Although most of them are Eurocentric, you can also find modules that work with New York, DC, and LA bus and subway schedules, plus much more.

4 MMM-OnThisDayWikiApi

I like getting random nuggets of information, and when it comes to information, there isn’t much better than Wikipedia. This module uses the Wikipedia API to pull up events that happened on the current date. There are lots of configuration options you can mess with, but you can get the On This Day module up and running with only two lines in your config.js file.

I didn’t like how this module automatically places itself on the left of my screen, so I created a bit of custom CSS to control how it displays. Every module is contained in its own CSS class, so with a bit of knowledge, you can fully customize your display. To center the On This Day module go to your CSS directory (cd ~/MagicMirror/css) and open up the custom.css file. Add this line to your file “.MMM-OnThisDayWikiApi {margin: auto;}” then restart your display.

There are other Wikipedia-based modules out there with slightly different behavior, and a pair of horoscope modules, but this is the best module in its class.

3 MMM-AVStock

I don’t follow the stock market, but I know that a lot of people do, and for that group of people, it’s important to be up-to-date with what’s happening in the market. This module is the perfect addition to the smart display of anyone who wants to keep an eye on the ticker. Installing AVStock is a little bit different from the previous modules in that there is an extra step to get everything working. After cloning the repo, head to the new directory it created (cd MMM-AVStock) and use the command npm install to download all the dependencies you’ll need to make this module work.

You can make this module as simple or as complex as you want, but keep in mind that it can chew up a lot of screen real estate just because it’s so information-dense. Definitely check out the repo so you can see the readme file with all the examples and instructions to get your setup perfect.

There are other stock modules available, but this one is the most polished, and it doesn’t require you to download an API key.

2 MMM-Globe

Not every module you put on your display has to be about maximizing productivity. Sometimes you need to add something just because it looks pretty. And if there’s one thing you can say about the Globe module, it’s that it’s pretty.

Often, simpler is better, and there are not a lot of complications to the Globe module. The module uses images from a few different geostationary satellites, so you can customize your view to wherever you happen to be in the world. To be fair, Globe doesn’t really have full global coverage. In total, it uses three satellites: the Japanese Himawari-8, the US GOES-16, and the European Meteosat. These provide solid coverage for most of the planet.

If you do want to add more coverage, the JavaScript running the module is relatively simple, and if you can find a decent satellite feed, you can easily update the code.

1 MMM-pages

Now that you have all of these sweet modules available to use, you’re probably wondering where you’re going to put them all. Thankfully, there’s a module for that! The Pages module lets you create multiple Magic Mirror pages and enables their cycle.

The magic here is all in the configuration file. Inside your module config object, you simply set up groups of modules that will become your different pages. Inside each group, you get to define which modules will be present. Lastly, you need to set how often you'd like it to alternate pages. If you don’t include a rotationTime value, you’ll only ever see your first screen.

This is just the most basic setup for the Pages module. You can program certain modules to remain fixed, so that they don’t move when the page changes. You can even make hidden pages that only appear under certain conditions, like when you have guests over and you want to show your Spotify or Sonos data.

Magic Mirror offers a lot to explore

There are over 1,000 Magic Mirror modules out there for you to discover, so this list has barely scratched the surface of what’s available. If you have a camera, you can set up a face detection system. Do you have a spare microphone? Set up Google Assistant. The best part about the whole Magic Mirror ecosystem is that everything is open source, so it’s entirely free. And if you want to make something yourself based on your own webdev work, the process is pretty simple, so you can get creative.