Introducing Notifications Visualizer for Windows 10

Notifications Visualizer is a new universal app in the Store that helps developers design adaptive live tiles for Windows 10. The app provides instant visual previews of your tile while editing, similar to Visual Studio's XAML editor/design view. Your payload is also checked for errors, ensuring you create a valid tile payload.

Developers will find Notifications Visualizer useful when they are looking at adding live tiles to their app. The Visualizer provides an easy way to create and test adaptive tile payloads, without having to edit and deploy your own app. Once you've created a payload with the perfect visual results, you can then integrate that payload into your own app (for generating notification payloads from code, check out NotificationsExtensions).

Notifications Visualizer comes pre-loaded with a number of sample payloads to showcase what's possible with adaptive.

With the Visualizer, you can experiment with all the different text options, groups/subgroups, background images, etc. And you can even see how the tile "adapts" to different devices, like tablets or phones, where more content can be displayed. After you've made changes, you can save your updated payload to a file for future use.

Note: The Visualizer is a replication of Start, and is not 100% accurate (and also does not support some payload properties like baseUri). Pin the tile to Start to verify your tile looks as expected.

The editor also provides real-time errors and warnings. For example, your payload must be less than 5 KB in size (a platform limitation). The Visualizer will warn you if your payload exceeds that. It will also give you warnings about incorrect attribute names or values, helping you debug why your tile isn't appearing correctly.

You can also control base tile properties like display name, color, logos, and ShowName properties. And you can set a badge value too. All of these options help you instantly understand how your tile properties and tile notification payloads interact, and the results they produce.

Learn more about Live Tiles in Windows 10...

• What's new with Live Tiles in Windows 10
• Adaptive Tile Template Schema and Documentation
• Tiles and Toasts Blog

The Notifications Visualizer used to be called "Template Visualizer". We showed off the Visualizer at Build 2015 and have finally released it to the public. Sorry for the delay, we were busy adding critical features before it could be released.

Comments

• Anonymous
  September 22, 2015
  Great app!  It's quite beautimous.  Now you just need to make it so you're editing Xaml rather than XML, and... WINNER! :D  Mmmm... needs more Xaml.  But then again, what doesn't? ;)  Great work, Andrew!

• Anonymous
  October 16, 2015
  This is great. However when I'm using the app and I specify a url for the peek image all works fine. When I specify a url for a peek image using the notification extension the tile fails. How are you accomplishing this?

• Anonymous
  October 16, 2015
  @Stephen - Could you tell us what image URL you're using? Feel free to post a new issue on the GitHub for NotificationsExtensions if you'd like to share more info (like a code snippet using NotificationsExtensions would be helpful) You can create the issue here: github.com/.../issues

• Anonymous
  October 19, 2015
  I've been spending some time in trial/error on this today. Seems to be some issue pulling the image from our cdn. Most of the time it did not work with the standard http scheme. When I changed it to https I got better results. I then compared with production and noticed a slight difference in the url (to the same cdn image). So far this adjustment looks like it will work so I'm trying to get the dev env to reflect the difference. I'm not sure why, when each url produces the same image, some urls worked and some didn't.

• Anonymous
  October 19, 2015
  @senloe - Remote images must be less than 200 KB, were the images that weren't working over 200 KB? The Visualizer doesn't respect this restriction (it'll display all images), but on actual Start, if an image is over 200 KB, the entire notification is dropped.

• Anonymous
  October 20, 2015
  They're very small, just a few k. You can try variations of the below url. They all work in the browser, but the first one had trouble on the tile. insight.coupons.com/.../19100393.gif insight.coupons.com/.../19100393.gif cdn.cpnscdn.com/.../19100393.gif

• Anonymous
  October 20, 2015
  @senloe - All three images worked for me on a tile. What build are you using? I tried it on Windows 10 RTM (not the insider builds).

• Anonymous
  May 15, 2019
  Are there any JavaScript library to visualize Windows10 toast notification? I am trying to build a web application to create Windows 10 toast notification. Users can create/customize notification with whatever image, logo, text and button they need and at the end application should generate the XML payload of toast notification which then be sent to WNS to deliver to client machines. But while user is creating the notification I want give a side by side live preview of the toast notification. To generate this preview are there any JavaScript based libraries available?I know there is Notification Visualizer app in Windows Store but I need this visualization in my web-application. But yes, I need visualization similar to this Notification Visualizer.

  • Anonymous
    May 16, 2019
    Hey Krishnaraj, nah I don't know of any JS-based visualizers of notifications.