Feedback

Your feedback is important to keep improving our website and offer you a more reliable experience.

Rapid Interface Builder

Rapid Interface Builder (RIB) is a browser-based design tool to quickly prototype and create the user interface for web applications. It supports UI design by dropping widgets onto a canvas, running the UI in an interactive "Preview mode" and then exporting the generated HTML5 and Javascript.

Install and start Google Chrome

Rapid Interface Builder (RIB) runs on the Google Chrome* browser. To use RIB, you must first download and install Google Chrome or Chromium on your development platform: http://www.google.com/chrome/

Once you've installed it, start Google Chrome with the parameters below. For these parameters to work, before starting Chrome, you must close any other instances of Chrome you have running.

Parameter Why needed
--enable-file-cookies RIB depends on file based cookies
--allow-file-access-from-files Allow RIB to access files on the disk

Security Note

Running one instance of Chrome with these parameters will affect all instances started afterward, even if running in separate windows. It is recommended, after running RIB, that you close all Chrome instances and restart Chrome for normal browsing.

Linux

Starting Chrome with the above parameters is easiest from the command line:

$ google-chrome --enable-file-cookies --allow-file-access-from-files

Windows

  1. Modify the Chrome launch properties by right-clicking on the Chrome icon in the Start menu.
  2. In the Chrome Properties dialog's Target field, after the path to chrome.exe, enter the parameters above. Click OK to save.
  3. Start Chrome by double-clicking the chrome icon.

Start RIB

RIB can be run either online or offline on Windows, Linux, and Mac.

Online

Using Chrome, navigate to the following URL: https://01.org/rib/online
Online benefits: No download necessary. Accessible on any system that has Chrome.

Offline

  1. Download RIB (.zip, .tgz) (3MB).
  2. Unzip it to a known location.
  3. Using Chrome, navigate to the directory and open "index.html"

Offline benefits: No network connection required. Faster performance. Your application code is kept local, providing more security.
Note: If you are running RIB offline, you can start Chrome with --app=file:///<path to RIB top-level index.html> and it will start in application mode.

Create the web application UI

When you create a new application UI, you likely visualize the elements of the interface or sketch them on paper. Using RIB, you can translate that vision or simple sketch into a web UI with pseudo data that can be manipulated in a realistic way (Preview mode). Through iterative, rapid prototyping, you can quickly organize all of the presentation elements within the UI.

RIB consists of four main modes:

  • Layout view: A palette of widgets, or components, and a canvas. Drag and drop the widgets onto the canvas to create your UI.
  • Code view: View the code generated from your design. This is the content that will later be imported into your web application project.
  • Preview mode: The generated HTML pages are loaded in the browser. You can navigate through the application and see how it will look and behave at runtime.
  • Project Manager: Click the Home icon in the top left to go to the Project manager, where all your UI projects are saved.

Each of these modes is described in further detail on the RIB Features page. However, the best and quickest way to understand how they work is to jump in and start using RIB.

Export UI project code


The code view described above displays the code that will be generated. When you are finished editing the user interface, you can export the code in a .zip file.

  1. In the top-right corner of the UI, click the Export button. The code is zipped and saved to disk in the default Downloads directory, as configured in the Chrome settings.
    Note: Zip format is used because it is a widely supported format for all OSs.
  2. Now you can import the UI code into your web application project.

Import UI project

You can also import existing projects (ones that you exported, or others you received or downloaded).

  1. Be sure you have a local copy of a project ".zip" file (produced by exporting a project as described above).
  2. Go to the "Home" tab, where projects are managed.
  3. In the top-center of the UI, click the "Import Project" button.  This will open a file browsing dialog.
  4. Locate the project file on your local computer and select it (double click or single click and "Open" or "Ok", depending on your OS).
  5. Once the project file is loaded, the UI will switch to the Layout View so you can begin working right away.
    Note: If the selected file was unable to be imported (invalid or corrupted contents, or an unsupported version of the project schema), you will see an error message.

As an alternative, you can also import just the "project.json" file (contained in the .zip file produced by exporting a project) load the project. This offers a light weight alternative to passing around and reusing a RIB project. Please note, becuase the .json only contains a abstract schema of the application, so relative to the .zip package, some information will be missing, such as project name, latest access time, HTML and CSS files, JavaScript libs, etc. You can think of the project.json file more like a "template" than a project.