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.

Project View (the home icon)

  • When you start RIB the first time, it will create an Untitled project. You can set the name by clicking the PROJECT SETTINGS button in the top right of the screen.
  • The projects shown in this view are stored in the local storage of your browser. If you run RIB from a different location (such as our online RIB vs. one on your local machine) you will have a separate local storage, so you will see different projects.
  • RIB automatically saves your project whenever you've been idle for a few seconds. So if you have a version of your project that you want to preserve for the future, you should EXPORT it with the button at the top right of the screen, and save it to your computer. When you make changes to the design, they will overwrite the copy in local storage, but you will still have the version you exported.
  • You can import a project by selecting a .zip file you previously exported, but really all that is needed is the .json file within it, so you can select just that file.

Layout View

  • You may want to make descriptive IDs for pages, so they're easier to remember. But be sure to keep them unique and non-blank, or you will actually screw up the tool. (We will fix this bug soon.) The IDs are auto-generated as "page1", "page2", and so on by default.
  • You may want to set IDs on widgets that you will want to dynamically maniuplate later in Javascript.
  • You can click on items in the Widget Categories pane to filter the available widgets in the Widgets palette. This can make it easier to explore them. But you can also click on the top-level categories to see all the widgets below.

Code View

  • If you select an element in the Outline View, the specific code generated for it will be highlighted
  • You can change properties for a widget from within the code view and see immediately how that affects the code output
  • When you export the project, this code is written to the index.html within the zip file.

Preview

  • You can see your app at various sizes in the preview tab, or set a custom resolution for the device you're targeting.
  • You can rotate the preview to see how the app would look in portrait or landscape mode with the device.
  • There is currently an Add Device feature but no Edit or Delete (coming soon). So you better like the name you pick. :)