Skip to content
MMM-HabiticaStats is a module for MagicMirror² that displays player statistics for Habitica.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
vendor fixing images Nov 15, 2019
MMM-HabiticaStats.njk Cleaning up screenshots Nov 16, 2019

MMM-HabiticaStats: A MagicMirror² Module

MMM-HabiticaStats is a module for MagicMirror² that displays player statistics for Habitica.


You're gonna need a (free) Habitica account to get an API token (see the Habitica wiki for details on how to find your API Token in your Habitica account).


Example Screenshots of MMM-HabiticaStats running in the default MagicMirror² theme:

Example Screenshots of MMM-HabiticaStats running in the WallberryTheme:

Installing the Module

To use this module:

  1. Copy the MMM-HabiticaStats folder to your MagicMirror/modules directory
  2. Add the module to the modules array in the config/config.js file like in the following example:
modules: [
		module: "MMM-HabiticaStats",
		position: "middle_center", // put it wherever you want
		config: {

Configuration options

The following properties can be configured:

Option Type Description
userID String Your Habitica userID. Sign up for free at

This value is REQUIRED
APIToken String Your Habitica API Token.

This value is REQUIRED
refreshRate Number How often the module should refresh your Habitica data (in milliseconds).

Possible values: Any positive integer
Default value: 60 * 60 * 1000, 1 hour
backgroundBlurOn Boolean Turn the background blur on; good for making the text more legible on photo backgrounds.

Possible values: true (turn on) or false (turn off)
Default value: true
zoom Float Scale this module using the CSS zoom property.

Possible values: A float number. Examples: 1.5 (scale up 150%), 0.7 (scale down 70%)
Default value: none
orientation String Whether to display the module in portrait or landscape orientation.

Possible values: portrait, landscape
Default value: portrait
positionCSS String Finely position this module with the power of CSS. BE CAREFUL, you can break all kinds of things with this.

Possible values: Any string of valid CSS. Example: "float: right; position: relative; top: -10px;"
Default value: none

Fixing The Background Blur

Please make sure you have the config option backgroundBlurOn: true set first!

If you're running MagicMirror using Electron (i.e, not in serveronly mode) and the background blur isn't showing up for you, try enabling Electron's experimentalFeatures option by adding the following block to your config options in your MagicMirror config.js file:

electronOptions: {
	webPreferences: {
		experimentalFeatures: true,
		nodeIntegration: false

Contributing & Development


To view the changelog see

Building CSS

This module uses SASS, so to make style changes please edit the MMM-HabiticaStats.scss file and use node-sass to compile the css file:

  • Run the command npm install to install node-sass.
  • Run npm run watch and node-sass will autocompile the CSS file any time changes are made to the MMM-HabiticaStats.scss file.
  • Run npm run build to build the CSS file.
You can’t perform that action at this time.