Updated May, 19th

This article will detail the steps to install a specific build of the Web UI and, in a second part, how to set up the development environment to make a contribution or just to take a look. I’m talking about this process since I’ve worked on this specifically. My last contributions to improve the maintenability of the existing UI has led the current process broken. This post also talks about the way UI packages are handled behind the scene with r2pm.

Install a web UI

It’s very simple to install the Web-UI. You need to pick one of them:

  • enyo with www-enyo
  • material with www-m (I’ll work on this one during my summer)
  • panels with www-p
  • tiled with www-t

You will soon be able to chose the way you want it:

Why two methods to reach those 4 UI? As a user, you have the choice to be safe with the version selected by the community or to be adventurous and opt for the most up to date version of the UI. This last option brings us more flexibility to test the UI in it’s final environment and to obtain a community feedback easily. Currently, this option is in development so, the safe version is already packed inside r2 release. It should be updated soon with a dedicated option.

There is one more option on the installation of the UI. You can chose to install them from your home directory or globally, depending on your needs. As npm or other package manager, you just have to add the -g option:

$ r2pm -gi <package> # Globally
$ r2pm -i <package> # From your home directory

To uninstall a package, just use -u instead of -i.

From tarballs

So, more technically, when this option will be avaible, this command will download a tarball on the radare2-webui release page with the good matching between your version of radare2 and the UI you are looking for. This tarball will be extracted into the right directory to be used later.

From sources

If you want to use the latest available UI, the process is still the same. Be careful about the installation of the same UI twice by the same process, only the last will be kept. The process is the same:

$ r2pm -i www-enyo # Enyo UI
$ r2pm -i www-m # Material design UI
$ r2pm -i www-p # Panels based UI
$ r2pm -i www-t # Tiles based UI

Behind the scene, this method will clone the radare2-webui repository and build the dependencies of the UI you are looking for. The result will be plugged to your current installation of radare2. This method require an updated version of node with npm.

Use it!

And now, everything is installed, you want to try them, it’s very easy:

$ r2 -q -e http.ui=enyo -c=H /bin/ls
$ r2 -q -e http.ui=m -c=H /bin/ls
$ r2 -q -e http.ui=p -c=H /bin/ls
$ r2 -q -e http.ui=t -c=H /bin/ls

How to set development environment for the Web UI

The method presented before is the easy part, to take a look at the UI. If you want to work with them, you will need to set a proper environment. Hopefully, you can made so with few quick steps! I will assume that radare2 is installed also with node and npm.

First, I would recommand you to fork the official repository and clone it on your computer. Then, we can start to look at it more seriously.

Second, you should build the structure to see if everything goes well. This project use a global Makefile to handle this, just run the following command in your shell:

$ make build

By doing this, we will retrieve all the required dependencies using npm, gulp and bower and placing the right files into the dist directory that will be used when we will run our UI.

There is more specific rules to build only one UI if it’s suit you, for example: make material for the Material Design UI.

Third, you want to be able to run a specific UI, so you can use the Makefile once again:

$ make run

This command will open your browser with the current default UI. If you want to run a specific UI, you can use those targets:

$ make runenyo # Enyo UI
$ make runm # Material design UI
$ make runp # Panels based UI
$ make runt # Tiles based UI

Fourth, you are ready to make your modifications inside the www directory, commit your changes and send a pull request!


I would like to implement a watcher inside the gulp rules to be more efficient with fewer steps between code and render.