Composer for BallerinaLang : Ballerina Composer

Image Source :

WSO2 just launched a whole new paradigm for enterprise integration as Ballerina. You can find out more about the buzz at WSO2 also revolutionised programming by providing a visual interface or rather in this case, a composer for Ballerina. In this post, we will unravel on the next generation of programming editors, the ‘Ballerina Composer’.

What is Ballerina Composer?

If you read through many of the introductory articles on Ballerina, you would know by now that visual representation is one aspect that sets Ballerina aside over many other integration paradigms. In a gist, Ballerina gives you the capability to either write or draw your integrations and switch back and forth as you please. Ballerina Composer is what allows you to do this.

Refer the following sample for Hello World with Ballerina Composer.

Textual Representation / Source View

Ballerina Composer — Source View

Visual Representation (Design View)

Ballerina Composer — Design View

As you can see above, it is a simple concept, but it is a powerful and an effective representation a source code of any programming language can ever provide. And the Ballerina composer specialises in this aspect.

Getting Started with Ballerina Composer

To get started with Ballerina, follow the user guides at :

Ballerina Composer Feature Overview

Following are some cool features that the Ballerina Composer provides.

  1. Visually compose Ballerina program
  2. Interchange between Source and Visual view of Ballerina program
  3. Swagger view for Ballerina program
  4. Running Ballerina program
  5. Debugging Ballerina program

Visually Compose Ballerina Code

Ballerina Composer — Design View

The Design View as we refer it in the Ballerina Composer, provides you with the capability of drawing or composing your Ballerina program.

Life Line/Worker

Some constructs has a life line of execution where you program the statements to be executed. As in the above screenshot, this is the FunctionWorker for functions. Similarly, resources have a ResourceWorker. In simple terms, this defines the flow of execution.

Tool Palette

Following is a screenshot of the tool palette.


Ballerina Composer — Tool Palette — Constructs

The constructs section contains the language constructs that can be dragged and dropped to compose the program. It contains the top level constructs, services, resources, functions, main function, connectors, connector actions, structs, type mapper and worker (in the order of appearance). When you add any of these, the relevant construct is created in the program.

The next section contains the statements that can be dropped into a lifeline and gets executed during the program execution. This contains if-else, assignment, variable definition, function invocation, return, reply, while, break, try-catch, throw, worker invoke and worker receive (in the order of appearance).

Current Package

Current Package lists down any of the functions, connectors and connector actions, that you have created in your current program.

Ballerina Composer — Tool Palette — Current Package

Native Packages and Imports

These are the packages that are available to be used by your Ballerina program. By default, the Composer imports few commonly used packages to this section. If you add an import to a different package, it is added to this section.

Ballerina Composer — Tool Palette — Native Packages and Imports
Ballerina Composer — Tool Palette — Native Packages and Imports

Composing the Program

To compose the program, you can drag and drop any of the constructs or imports that appear in the tool palette to the editor window.

Let’s look at a simple hello world program. Since we are planning to print a simple hello world message, we will use a main function that can be executed and add a print statement. Steps are listed below.

  1. Create a new file
  2. Drag and drop main function to the editor window
  3. Drag and drop a system println statement
Hello World with Ballerina Composer

Interchange between Source and Visual Views of Ballerina Program

As you can see in the above shared screencast, after composing the program with the Design View, you can switch to Source View to view the source of the Ballerina program.

If you happen to write the source code completely in the source view, when you switch to Design view, the Visual representation is created.

Ballerina Composer — Source to Design View

You can also open an existing Ballerina program (.bal file) to view it’s visual representation and make changes to the program either visually or textually or both.

Swagger View for Ballerina Program

If your Ballerina program contains services and resources, you can view the generated Swagger definition for your program by switching to the Swagger view. All the changes made on the Swagger definition will reflect on the Ballerina program when you switch back to Source or Design view.

Ballerina Composer — Swagger Definition
Ballerina Composer — Swagger Definition

Running Ballerina Program

You can run your Ballerina program in the Composer itself. Set the BALLERINA_HOME to point to the Ballerina runtime and click on Run > Application.

Ballerina Composer — Run Ballerina Application
Ballerina Composer — Run Ballerina Application

Debugging Ballerina Program

You can debug your Ballerina program using the debugger of the Ballerina Composer.

Add breakpoints to your Ballerina program from the design view and run the program in debug mode. The program will stop at the breakpoints and you can view the states in the debug view.

Ballerina Composer — Debug Ballerina Application
Ballerina Composer — Debug Ballerina Application

Contributing to Ballerina Composer

You can contribute to Ballerina Composer at our Github repository at

If you face any issues please raise at:

If you have any questions, reach us at :

Few Other Interesting Posts on Ballerina