Navigate your web browser to the following location:

and you should get a window that looks like this:

We'll go over more details of this editor and all its features in a separate guide. Here we'll just run through a quick example to show the basics of creating and uploading a program.

Pressing the orange "Getting Started" button will launch an interactive tutorial.

There are three main areas as shown below:

These three areas are:

  1. The Simulator
  2. The Pallet
  3. The Coding Area

To write programs, you drag blocks from the pallet (2) on to the coding area (3) and snap them together. The simulator (1) will update on the fly to show the resulting program running on a virtual BBC micro:bit.

Hello Heart Example

Let's show a very short example.

Click on the item in the pallet named Basic. This will bring up a variety of block items you can choose from as shown below.

Now click and drag the item named show leds on to the coding area.

Now drag the show leds block so that it "clicks" in to the on start block. To do this, you line up the little tab and notch as shown below. Kind of like putting Legos together.

And now it should look like this (I moved the forever block down just to get it out of the way):

Now you can click the individual little squares in the show leds block to create a pattern. What you are doing is setting which LEDs in the 5x5 matrix are either on or off. They just toggle on and off, so you can just keep clicking until you come up with something you like.  I did a heart:

OK, done coding! Now let's download this program to the BBC micro:bit. Press the big button down at the bottom that says Download:

What happens next will depend on what operating system you are using and what browser you are using. But what is happening is that a file was created by the Javascript Blocks Editor and it is trying to send it to you. The file is called mircobit-Untitled.hex and you just need to save it somewhere on your computer.

It is possible to give the file a name other than 'Untitled', but we don't cover that here.
It is possible to save the file directly to the BBC micro:bit, but we don't cover that here.
These files are often called 'hex files' because they have a .hex filename extension.

You will likely be prompted to save the file somewhere as shown below.

Go ahead and save it and make note of the location where it was saved. I put mine in my Documents folder.

Now imagine that hex file you saved is a JPG image file and that the BBC micro:bit is a USB thumb drive. The process for uploading the program (the hex file) to the BBC micro:bit is the same process you would use for copying the JPG image file onto a USB thumb drive.

Connect the BBC micro:bit to a USB port on your computer. A folder name MICROBIT should appear. Next, open the folder where you saved the hex file from above. Now simply drag the hex file into the MICROBIT folder.

The little yellow status LED on the BBC micro:bit will blink as the file is uploaded. Once complete, the status LED should stop blinking and you should see your pattern on the 5x5 LED matrix.

Neat! And that's the basic process for writing and uploading a program using the Javascript Blocks Editor.

This guide was first published on Aug 27, 2017. It was last updated on Aug 27, 2017.

This page (JavaScript Blocks Editor) was last updated on Aug 26, 2017.

Text editor powered by tinymce.