WebUSB Uploading

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.

First Time Setup

Once you have chrome and the makecode beta URL open, you will need to download a blank program to the Circuit Playground Express. With the programming area blank, click the pink Download button in your project window. Save the UF2 file to your hard drive. Place the Circuit Playground Express into bootloader mode by pressing the Reset button once (or twice) to get a green ring of lights. Copy your UF2 file from your hard drive to the CPLAYBOOT drive that appears on the list of your computer's drives when the board was placed into bootloader mode. When the UF2 file copies over, the board will reset.

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!

Pair Device

Once the initial UF2 has been copied over to the flash drive, click on the cog wheel icon in the top right corner, next to the Microsoft logo. Find the Pair Device link in the menu and click it.

Connect PXT Device

Once you've clicked on Pair device, a popup window should appear below the browser URL input box. Click the blue connect button to establish connection between your PXT device and browser.

Device Paired!

You'll get a nice notification near the bottom of the screen letting you know the device was successfully paired. Give it a try and click on the big download button to upload your code!

Notes & Thoughts

You do not have to re-pair your device each time you disconnect the USB cable. However, if you find the upload button stops working or gets hung up, you can attempt to pair the device again using the same method. If you still can't get connection, try using a different USB cable. It MUST be a USB "data" cable. If you still are having issues, use the support link under question mark icon next to the cog wheel icon in the top right.

This guide was first published on May 16, 2017. It was last updated on May 16, 2017. This page (WebUSB Uploading) was last updated on Sep 20, 2019.