Get started with Microsoft Graph Toolkit at Microsoft Learn
Published Mar 15 2021 10:06 AM 7,807 Views

Today, we’re excited to announce the Get started with Microsoft Graph Toolkit module is available on Microsoft Learn for all learners.  


If you’ve never heard of Microsoft Graph Toolkit before, you are in the right place! Microsoft Graph Toolkit is for developers interested in building web-based productivity and collaboration solutions in a simple way. Basically, Microsoft Graph Toolkit is a set of HTML components and authentication providers that help you build a complete experience with three lines of code. 


To make it easy to understand here's an example: Let’s say you want to implement Microsoft Planner tasks in a web page. You can easily do that by using the Tasks component available in Microsoft Graph Toolkit. The beauty of these HTML components is that you don’t need to worry about back-end or front-end. A single HTML tag <mgt-tasks> handles all processes of getting the data and showing it in a pre-built UI. 


Here is how you can use the Tasks component: 




And here is how the result will look like right out of the box in your web page: 


Tasks component in Microsoft Graph ToolkitTasks component in Microsoft Graph Toolkit

There are a lot of other components and providers in Microsoft Graph Toolkit! Are you ready to discover more?  

What will you learn in the Get started with Microsoft Graph Toolkit module?


The Get started with Microsoft Graph Toolkit module will help you address questions, such as: 

  • What is Microsoft Graph Toolkit? 
  • Why should you use Microsoft Graph Toolkit and what are the benefits? 
  • How can you use Microsoft Graph Toolkit in web apps? 

This module will help guide you through the learning process through hands-on experience that is designed for beginners who have zero knowledge about Microsoft Graph Toolkit. And, it's no more than a couple lines of HTML!


Give it a try; by the end of the module you will understand how to build the experience shown below with only four lines of HTML: 


Microsoft Graph Toolkit - Sign in GIF.gif


Before you start, let's setup your environment


Before we begin, there are a few basic tools and requirements needed to complete the exercises and practice units. Here's a step-by-step guide for what you'll need to set up your environment:  


Step 1: Get a free tenant from Microsoft 365 Developer Program 


The Microsoft 365 Developer Program provides a free Microsoft 365 tenant for everyone! The program provides a free sandbox, tools, and resources to build solutions for the Microsoft 365 platform. 


Microsoft Graph Toolkit - Join Microsoft 365 Developer Program v2.png


  1. Go to the Microsoft 365 Developer Program website and select JOIN NOW
  2. Login with a Microsoft account (work, school or personal). Once logged in, you will be directed to a page to fill out the following details: 
    1. Country/Region
    2. Company
    3. Language Preference
  3. Make sure to select Terms & Conditions and click Next
  4. When your profile is successfully created you will be directed to the program page. Select SET UP E5 SUBSCRIPTION to create your free tenant (as shown below):

Microsoft Graph Toolkit - Set up E5 Subscription v2.png


5. Fill in the following details and select Continue

  1. Username 
  2. Domain – must be globally unique 
  3. Password 

Microsoft Graph Toolkit - Set up E5 Subscription part 2 v2.png


6. Add a phone number for security purposes and select Set up.

7. Congratulations! Your tenant and administrator account are successfully created. 


Microsoft Graph Toolkit - Set up E5 Subscription complete v2.png


Now you can use your Administrator account to build and test your solutions for Microsoft 365 Platform.


Step 2: Install Visual Studio Code 


You will use Visual Studio Code while working on practice units in the learn module. Install Visual Studio Code by visiting:  


Step 3: Install Visual Studio Code Live Server 


You will need the Visual Studio Code Live Server extension to run and test your project at the end of each practice unit in the Microsoft Learn module. Install the Visual Studio Code Live Server extension from the Marketplace: 

Let's start your journey with Microsoft Graph Toolkit!


Now that you have all the pre-requisites squared away...are you ready to begin your journey with Microsoft Graph Toolkit? Visit the Get started with Microsoft Graph Toolkit module and start learning how to build productivity & collaboration solutions today.


Want to learn more about Microsoft Graph Toolkit?


Join us for a 2-hr livestream event on April 14 to learn together, more information coming soon via!

Version history
Last update:
‎May 06 2021 11:47 AM
Updated by: