The Bela IDE

Designing an industry-leading browser-based programming environment for physical computing, from the ground up

Project description: 

In 2016 I designed the first browser-based IDE for Bela, a platform for creating interaction with sensors and sound, and led the design and evolution of the Bela IDE over three iterations. The Bela IDE removes the steep setup barriers of traditional hardware programming, integrates hardware-specific tools like an oscilloscope and interactive pin diagram, and offers a clean, consistent environment for both beginners and experts. For version 3, I created a fully documented tokenised design system that defines every UI element and expresses it through the Bela brand's core colour and typography system.

Role:

Lead designer from concept to release over a 10-year span, including UX design, UX copy, visual design, UI development and interaction patterns.

Introduction

When Bela began in 2016, writing and uploading projects to the board required installing a custom virtual machine, writing code in Eclipse, cross-compiling, and uploading via the command line. While this workflow is familiar to people already expert in code and embedded hardware, it was daunting for anyone outside those disciplines.

One of the original Bela engineers discovered that we could run a Node server on the board, and it was fast. This sparked the idea to create a Bela IDE, a web-based interface acting as a membrane between the person using Bela and the Bela core. I designed the first iteration and led the design of this software product for 10 years. Now in its third version, the Bela IDE has grown to offer not only a great programming environment but also essential tools for physical computing, such as a library of example projects, a built-in oscilloscope, and an interactive pin diagram to remove any guesswork about where to connect components.

Since 2016 the Bela IDE has become an industry-leading software product, providing one of the most approachable introductions to embedded programming and physical computing with sensors and sound.

We replaced a maze of virtual machines, Eclipse windows, and command lines with something anyone could open in a browser and just use.

First steps

Early on, one of the Bela developers found that it was possible to run Cloud9 on the Bela board via a Node server. This meant we could offer a browser-based IDE complete with a code editor, syntax checking, and an interactive terminal. I found this exciting; I had just built the first iteration of Metrix and knew how powerful Node-based interfaces could be. We agreed to prototype a browser-based programming interface for Bela.

At the time, I had been exploring IDEs across both embedded hardware and software development, trying to pinpoint why so many felt frustrating to use. A few recurring issues stood out:

• Misplaced features. Controls often lived in places that didn't match how people actually worked, or they were duplicated in multiple, inconsistent locations.
  
• Interruptive layouts. Switching between working with hardware and software was awkward. For example, the "Run" button might be at the top of the window while the person's cursor was near the bottom of the editor.
  
• Visual clutter. Many IDEs displayed all features at once, overwhelming new users with dense, context-free controls.
  
• Lack of hardware-specific tools. Aside from the Arduino IDE, few environments addressed the needs of programming for hardware; even Arduino lacked integrated tools to make the process easier.
  
  

I set out to design the Bela IDE to address these issues from the ground up.

If most IDEs are a kitchen sink, we built a workbench. Everything within reach, nothing in the way.
 

Designing the Bela IDE

Structure and Interface

This wasn't a case of rearranging an existing interface. Instead, I had to create an organisational structure from scratch. 

Instead of grouping features according to software logic, I organised the IDE around the flow of working with Bela hardware:

• Keep frequently used actions close to where the person's focus already is
  
• Except for core project control (like run/stop and the code status indicator), only show controls when the person actively calls them up
  
• Integrate hardware-specific tools into the main workflow, not as secondary utilities
  

From day one, the IDE wasn’t just a code editor; rather, it was a full hardware programming environment. Alongside an editor that was a reliable interface for writing C++, as well as viewing and running Pure Data projects, we built in an oscilloscope, an interactive pin diagram, an on-board reference, and a library of example projects. Crucially, everything you could do on the command line was available here, from setting compilation flags to running scripts in an integrated terminal.

2016: V1

First iteration. Structure is already present, and basic functionality is in place

2018: V2

Second iteration with better design system use, updated interface and features like a programmable GUI and code libraries

2025: V3

The most ambitious yet. Updated UI based on documented design system; new features for hardware and signals; light and dark modes

Integrating hardware-specific tools

The oscilloscope and interactive pin diagram were major quality-of-life features, making essential but awkward processes quick and accessible. The oscilloscope let users visualise signals directly on the board without needing to find or hook up an oscilloscope, and the interactive pin diagram removed the guesswork from hardware connections. The pin diagram automatically shows the layout for the Bela system currently connected, and also allows for exploration of other Bela systems via a dropdown menu. 

The on-board reference and example library means you can go from concept to working code without leaving the IDE. Don't know where to start? Open an example and start adapting it. Need to find out how to do something? All built-in functions and utilities are viewable in the Reference. Together, these tools made Bela programming faster, more intuitive, and more error-resistant for both beginners and experts.

Visual design principles

The IDE needed to be approachable without slipping into the hyper-technical aesthetic common in many developer tools. I aimed for a tone that was light and friendly, but still clearly a professional tool, never a toy.

The colour palette came directly from the Bela brand, expanded with functional accents — yellow for highlights, red for warnings — always used for clarity, never decoration. For version 3, I designed and documented a tokenised design system that defined every aspect of the interface: spacing, font usage, colour choices, and behaviour across both light and dark modes. The five core brand colours proved flexible enough to work flawlessly for both themes without palette expansion. Implementation was underway when I left the project, so the final released interface may differ from the design shown here.

Typography was chosen for long-session readability: Space Mono for titles, Space Grotesk for body text, and Inconsolata for all UI numbers and console output.

Layout and hierarchy

The Bela IDE has a 6-part structure, consisting of:

• The status bar
• The code editor
• The toolbar
• The interactive console
• The tabs 
• The signal visualiser
  
  

This structure has is largely unchanged since my first iteration of the IDE in 2016, though the signal visualiser is a new feature for V3. This is a place for an at-a-glance summary of the activity on 

The editor takes up the majority of the screen and sits in the top left. Above it, the status bar constantly displays the current project, and the active file within that project. The console runs along the bottom, with the toolbar just above it, so you can start, stop, or shut down a project without moving the mouse far from where you’re working.

Collapsible tabs on the right group related tools. These are Project Explorer, Settings, Examples the Pin Diagram, Libraries, and Reference. V3 will see several new groups added: Hardware, where you can generate test signals; Connections, where you can set up Wifi, MIDI and other connection settings; Documentation, which holds written and photographic docs; and Audio, where you can manage all aspects of stereo or multichannel audio I/O.

Interaction design

Small, consistent microinteractions keep the IDE feeling responsive and predictable. Every button has a clear hover state in both light and dark mode. Buttons also change to reflect their current function: for example, when a project is building, the Run button turns yellow and rotates slowly; when it’s running, it turns green and spins faster.

Rather than showing and hiding controls automatically — which risks obscuring features from less typical workflows — the core elements (Editor, Toolbar, Console) are always visible. Additional tools live in the collapsible tabs so users can keep them open or close them depending on their needs.

Invisible helpers smooth out the workflow: syntax checks automatically save code to the board, the console auto-scrolls, and panel states persist between sessions.

Accessibility and ergonomics

Accessibility was a priority from the start, and in version 3 all contrast ratios were brought into alignment with accessibility standards. Light and dark modes were designed in parallel, using the same five core brand colours to ensure visual consistency.

Major controls — start/stop, scope launch, tabs, shutdown, GUI launch — were sized and spaced for quick targeting, reducing the precision needed to click them. While the IDE is designed for desktop use, it also works comfortably on iPad, which has been useful for remotely controlling WiFi-enabled Bela boards.

Impact and legacy

The Bela IDE is now a core part of the Bela ecosystem, used in classrooms, workshops, and studios around the world. Its design lowered the barrier to embedded programming for thousands of users, from first-time hardware programmers to experienced engineers.

The structural and visual consistency I established in V1 — and carried through into the documented V3 design system — has kept the IDE approachable and reliable, even as new features have been added. While I left before V3 launched, my work ensured that the team had a complete, tokenised system to build from, preserving the brand’s clarity and the product’s usability.

Bela IDE, Version 3

Light mode

Dark mode

I designed the Bela IDE to make hardware programming feel clear and inviting, without ever limiting what it could do. Years later, the same structure and principles still guide it, proof that clarity and depth can grow together.