Microsoft MakeCode for Adafruit is a web-based code editor for physical computing. It provides a block editor, similar to Scratch or Code.org, and also a JavaScript editor for more advanced users. Try it now at https://makecode.adafruit.com/ !

Some of the key features of MakeCode are:

• web based editor: nothing to install
• cross platform: works in most modern browsers from tiny phone to giant touch screens
• compilation in the browser: the compiler runs in your browser, it's fast and works offline
• blocks + JavaScript: drag and drop blocks or type JavaScript, MakeCode let's you go back and forth between the two.
• works offline: once you've loaded the editor, it stays cached in your browser.
• event based runtime: easily respond to button clicks, shake gestures and more

MakeCode currently supports the Adafruit Circuit Playground Express. For other boards, like the Adafruit Metro M0, try https://maker.makecode.com .

 

The block editor is the easiest way to get started with MakeCode. You can drag and drop blocks from the category list. Each time you make a change to the blocks, the simulator will automatically restart and run the code. You can test your program in the browser!

• try our getting started tutorial that helps you build a siren program
• try one of our projects to learn more about the features of the Circuit Playground
• our favorite way to learn is by watching MakeCode Live with John Park, either the playlist of recorded videos, or by watching it live on Tuesdays at 3pm ET on the Adafruit Youtube Channel
• take a deep dive in the documentation

Do you want to select or change colors? The show ring block has a built-in color picker. Select the color from the color wheel to select a color, then click one of the ten Neopixel rings to modify its color. 

How do I disable a Neopixel? The grey dot in the middle of the color wheel indicates that the pixel is off. Select the grey from the color wheel and then click the Neopixel ring. 

You can see the Blinky block program in action in the MakeCode editor below. You can also see how the blocks are "slotted together". Clicking the question marks on the box will pop-up a comment to explain what the block does. 

In the next section, we'll load the Blinky code onto the Circuit Playground Express! 

When the Circuit Playground Express is in Bootloader mode, all the LEDs will turn red briefly, then green. Verify your status LED is also pulsing red. Your computer should show a new removable drive called "CPLAYBOOT"

 If the LEDs are all red: Either the computer is still installing drivers (Please wait a minute, Windows takes some time to install updates.) or you have a bad USB connection. If you keep getting red LEDs - try a new USB cable (you may want to ensure your USB cable is not charge only, it needs to transfer data) or a different USB port.

Once your LEDs are all green, you should see a CPLAYBOOT drive appear in your drive list in your file explorer.

We are now ready to compile our blinky code and download it to our board! 

Let's first verify that our code compiles properly in MakeCode.

MakeCode has a built-in simulator that re-loads and re-runs code when restarted. This is an easy way to both ensure that our code compiles and simulate it before moving it onto the board. The refresh button re-loads the simulator with your latest version of block code. 

If your board is working in the simulator, it's time to download it to your actual board! Click the "Download"  button. It will generate a .uf2 file and download it to your computer (UF2 is a file format designed to flash microcontrollers over USB).

General Steps to copy over your program (not specific to any Operating system)

1.  Ensure your board is in bootloader mode.
2. Find the .uf2 file generated by MakeCode in your file explorer. Copy it to the "CPLAYBOOT" volume. 
3. The status LED on the board will blink while the file is transferring. Once it's done transferring your file, the board will automatically reset and start running your code (just like in the simulator!)

Windows: Open Windows Explorer (Windows key + E key) and locate the "blinky.uf2" file you generated. It's probably in  your Downloads folder!

You can copy/paste the file to your CPLAYBOOT volume or you can drag/drop it like in the GIF below. 

macOS: Open Finder and locate the "blinky.uf2" file. You can copy/paste this file to the "cplayboot" volume or drag/drop it from the same finder window. 

If you want to avoid the copying process: You can download your programs directly to the board. To do this: change the download location in Chrome, Firefox, Safari, or Opera to the main directory of your "CPLAYBOOT" volume.

Running MakeCode that's Already Loaded

If you unplug your board and then plug it back in again to your computer, it may not run the program again automatically. If it instead shows all green NeoPixels, just press the reset button and your program will start.

Want to change the Blinky program to display different colors, or make it play a sound? Editing the program on your Circuit Playground is super easy! 

Extracting your code from the Circuit Playground

The .uf2 file (CURRENT.UF2) you created by clicking on the Compile button in MakeCode also contains the source code of your program!

You can open this file in MakeCode by dragging and dropping it into the browser to edit it. 

You can also switch between blocks and JavaScript by clicking the button on the top. 

One-Click Deploy

Are you tired of dragging and dropping your UF2 files over and over again? Well then WebUSB upload is for you! With WebUSB, you can upload your code directly to your board without having to save a UF2 file and then dropping it onto the flash drive. Just plug keep the USB cable plugged into your computer and upload code as many times as you need!

Requirements!

You'll need to do a few things before you can use WebUSB

• You will need to use the latest version of the Google Chrome web browser. Firefox, Safari, Opera, Edge, etc do not support WebUSB at this time. Only Chrome, only versions 68 or greater! 
• Run Windows 10, Latest Mac OS X or Linux. Windows 7 or 8 is not supported!

Update Bootloader

You will also need the latest bootloader firmware for Circuit Playground Express (which only needs to be done once). We ship the newest bootloader on Circuit Playground Expresses as of July 2018 but in case you have an old one, it doesn't hurt!

Updating the bootloader is as easy as flashing a MakeCode program. Simply enter the bootloader by pressing Reset once (or twice) to get a green ring of NeoPixels. A flash drive called CPLAYBOOT will show up in your operating system's file explorer/finder. Drag the update bootloader uf2 file you downloaded via the green button to the CPLAYBOOT drive. This uf2 contains a program which will unlock the bootloader section, update the bootloader, and re-lock it. It will overwrite your existing code such as CircuitPython or Arduino so make sure everything is backed up!

Special MakeCode URL

Once you have it up and running, you'll need to go to the special MakeCode link with WebUSB enabled. Use the green button below or copy+paste the full URL into your browser: https://makecode.adafruit.com/?webusb=1#editor

Projects & Extensions

Your existing projects should remain in the MakeCode site so you don't need to copy anything over. However, if you had any extensions installed, you will need to reinstall them. This can be done by clicking on the extension menu and selecting the extension.

This is required in order to access the WebUSB functionality from Google Chrome. You only need to do this once, this first time! After copying this UF2 over, hopefully it'll be the last time you'll drag and drop one to your device!