qooxdoo WYSIWYG UI Editor

Type: qooxdoo editor project to be used as dependency for own projects

(FYI: english description only)

Compatibility: qooxdoo 5.x

Playground: current editor build


There are many HTML5/CSS3 UI frameworks out there, one of those is the qooxdoo framework. This framework supports among other things the development of HTML5/CSS3 SinglePage Web Applications and is especially easy to use because it provides the possibility to develop exclusively in Javascript/JSON which in itself doesn’t require any knowledge of HTML5/CSS3. Instead of HTML thinking the UI is developed using the more programmatical approach of containers, layouts and widgets. Furthermore the framework provides a reflection like concept for widget attributes, be those default or user specific ones, which is why an editor building on that reflection was possible in the first place. Using reflection of those attributes (properties in qooxdoo terms) the editor is able to handle custom built widgets with all the properties generically, without any special code.

Editor features:

  • free of charge (using qooxdoo, PouchDB if needed) and open source
  • What-You-See-Is-What-You-Get functionality providing the fastest possible way to try out and build new layouts
  • can and should be used as dependency project for own qooxdoo projects incorporating own themes and widgets
  • layout provider modules for handling of layouts incl. following default providers:
    • in-memory provider for testing only (volatile Javascript memory)
    • browser local cache provider for testing only (volatile user’s browser cache memory)
    • PouchDB provider using user’s browser cache for local layouts, but also supports synchronization with a remote CouchDB server
    • remote repository provider for communicating with a file service (also provided inside the sample project)
      • the service provides storing layouts as JSON files and baking a JS qooxdoo class containing all those layouts in production version environment

  • switching of qooxdoo themes (FYI qooxdoo theme switching at runtime can be quite limited, but after some adjusting of local qooxdoo version could still be very useful)
  • switching of locales auto-translating any string values starting with “trn:” (using the .po functionality of qooxdoo)
  • importing of existing qooxdoo layouts from running code (helps to migrate existing UI code to JSON layouts)
  • hierarchy tree view of current layout with drag&drop in the tree and with the copy&paste&etc. functionality usually found in UI editors
    • dummy content and using of nested layouts for better wysiwyg view of a layout (content is omitted on loading the layout in code)

  • sub hierarchy view for complex properties like “decorator” (e.g. provides a possibility to try a decorator in wysiwyg before defining it in the theme files)
  • generic property view of all widget properties with property “check” detection (i.e. a “string” will be represented by a textfield, “bool” by checkbox etc.)
    • provides a possibility to mark elements with an ID to get elements for runtime access later in code (better separation of UI and controlling)
    • provides wysiwyg Decorator/Color/Font view in the corresponding properties’ selectboxes

  • wysiwyg view of the current layout incl. viewport size and background color settings
    • provides possibility to view generated JSON code of current layout and/or currently selected hierarchy

    • provides possibility to view generated JS code of current layout and/or currently selected hierarchy

    Editor limitations:

    • Complex and non-conform layouts and widgets can’t be used inside of the layout (e.g. Grid layout, Table widgets and similar)


    • Current release
      • FYI expects qooxdoo 5.x to be found at ”../../../download/qooxdoo-5.0.1-sdk/qooxdoo-5.0.1-sdk” (alternatively edit config.json files)


    The editor should be self explanatory to some extent, but it’s role in the development process can vary in complexity depending on the expected impact. Following sections should provide some insight into how the editor is expected to be used and also a short tutorial regarding building a UI module in the editor.

    Preferred Approach

    Page 1 of 4 | Next page