MagicMirror module that pulls in tide, water temp, and Magicseaweed data to show an at-a-glance surf report for your favorite spot.
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.


MMM-Surf is a Magic Mirror module that will display weather, tides, water temp, and Magicseaweed forecast data for your favorite spot. It is currently North America centric, pulling tide and water temperature from the National Oceanic and Atmospheric Administration (NOAA).

The surf forecast data is minimized from the normal Magicseaweed interface to focus on "at-a-glance" information only: The Magicseaweed star rating system, height of swell at periodicity, swell direction, wind direction, and speed. These bits of information are color coded based on certain configurable items (see below): Green means the condition is right for the spot, orange means acceptable, red is slop. If I see all green, I go.



To get MMM-Surf up and running, you will need to do some scouting.

**Note: Magicseaweed's API is in beta mode and does not have an automated sign up process; however, the people are awesome and very responsive via email.


Clone the repo into the MagicMirror modules directory

cd ./MagicMirror/modules/
git clone


You will need to source a few bits of information to configure the MMM-Surf module:

  1. Magicseaweed spot ID for the MagicSeaweedSpotID config item. For example, 391 from

  2. NOAA Tide and Current for the station_id config item Find the closest measuring station to your spot. Click the map pin to open the details of the station. Copy the station_id number that appears before the location. 9415020 for the point Reyes, CA example below.


  1. Wunderground Location for WuPWS config item. Multiple acceptable formats can be accepted:
  • CA/San_Francisco - US state/city
  • 60290 - US zipcode
  • Australia/Sydney - country/city
  • KJFK - airport code
  • pws:KCASANFR70 - Personal Weather Station id

I prefer the pws:STATIONID format as it can provide hyper localized conditions for a particular spot; however, be warned that Personal Weather Stations vary in quality.

To find a PWS ID:

  • Search Wunderground for a major city name
  • Next to the City name there is a "CHANGE" menu item
  • Zoom around on the map to find the closest weather station and note the ID in parenthesis
  • If we wanted to use Kelly's Cove @ Ocean Beach, our config item would be pws:KCASANFR99 for the example below


module: "MMM-Surf",
debug: "0",
position: "top_left",
config: {
        MagicSeaweedSpotID: "",         //REQUIRED: numeric spot ID from magicseaweed, e.g. "390"
        MagicSeaweedSpotName: "",       //REQUIRED: shorthand name for your spot...(e.g. Secret Spot, Lowers, Ocean Beach, OCNJ)
        spotSwellHold: [],      	//OPTIONAL: Best swell direction that your spot handles. Accepts multiple cardinal directions, e.g. ["N"] or ["S","SSW","ESE"]
        spotWind: [],          		//OPTIONAL: Best wind direction for spot. Accepts multiple cardinal directions, e.g. ["N"] or["S","SSW","ESE"]
	spotSwellMin: "",       	//OPTIONAL: Define minimum swell size that works at the spot, e.g. "3"
        spotSwellMax: "",       	//OPTIONAL: Define maximum swell size that works at the spot, e.g. "10"
        MagicAPI: "",                   //REQUIRED: magicseaweed API Key
        station_id: "",                 //REQUIRED: NOAA Tide and Currents monitoring, e.g. 9415020 for Point Reyes
        Wuapikey: "",                   //REQUIRED: Wunderground API
        WuPWS: "",                      //REQUIRED: Wunderground Location, e.g. "pws:KCASANFR99" or "CA/San_Francisco" or "60290" or "PHL"
        noaatz: "lst_ldt",              //NOAA time zone requests. Local Standard Time / Daylight time.
        hourly: "1",
        fctext: "1",
        fcdaycount: "4",
        fcdaystart: "0",
        hourlyinterval: "3",
        hourlycount: "2",
        alerttime: "10000",
        alerttruncatestring: "english:",
        roundTmpDecs: "1",
        UseCardinals: "0",
        layout: "horizontal"


For the versions available, see the tags on this repository.



  • CaptainJimmy - Code optimization and beautification.
  • sh3rp - Education and pointers around the process for identifying the best forecast for each day


This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license - see the file for details


  • Magicseaweed Tech Team
  • MagicMirror community for inspiring me to make a thing for the first time in many years
  • Xinh Studio - High and Low Tid Icons by Xinh Studio from the Noun Project - Xinh Studio
  • Erik Flowers - Weather Icons Project - Weather Icons
  • RedNax 67 - Magic Mirror Wunderground Module that served as layout inspiration and provided some code direction - RedNax67's MMM-Wunderground module