Next generation of Zebra is ready! Distributed under LGPL now. Find source code on GITHUB.

Zebra brings fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept. You keep distance from the mess of HTML, JavaScript code, CSS and DOM manipulation. Zebra is pure WEB based alternative to Flash or Applet technologies that doesn’t require a plugging on a client side to be installed. In the same time Zebra utilizes power, simplicity and beauty of JavaScript coding.

Below you can find many different live Zebra based samples and small applications. Better to see it once instead of wasting tons of words.

Zebra Rich UI live demo

Take a look and try the most from 30 Zebra UI components collected in one demo

Run the demo
in new window

Zebra UI Engine live samples

UI engine is handy and powerful Zebra package that can be helpful to implement own UI interface, work with canvas events and render graphical content


Three charts are arranged with border layout manager (using TOP, CENTER, BOTTOM constraints)

Drag-able panels

Drag and move panels on the canvas

Layer to freeze input

Press ALT-D to disable or enable input elements. Enter a character when it is enabled

Drag-able charts

Three charts are placed with stack layout manager. Charts are draggable, drag a chart by mouse.

Mouse cursor control

Mouse cursor is changed according to an area it is moved in

Shaped UI component

UI component can have desirable shape. Find triangle and circle UI components. The components change its background when mouse cursor gets in it.

Layouted components

Hierarchy of standard Zebra UI panels that are arranged by applying various layout managers: border, list, grid layout managers.

Shaped focusable components

Number of shaped UI components that are arranged with border layout manager. Every component can be used to input a character. Focus manager allows a user travel by TAB between the input components.

Mouse event handling

Gradient follows mouse cursor and prints mouse coordinate. Pressing a mouse button changes gradient color.