Latest 4.2014 zebra version is distributed under under Apache License !

Innovative HTML5 UI

Building and rendering any imaginable UI components on HTML5 Canvas. Pixel by pixel painting control, event handling, focus management, look and feel customization, layout management and so on.

Rich UI components set

More than 30 various UI components: grid, tree, scroll, text field, text area, combo, menu, widow, dialog, popup menu, tooltip, tabs, slider, list, button, video checkbox, radio box, label, border panel, split panel and many others.

Decoupled UI engine

Light weight, fast and compact UI engine. Handy to render a content on canvas, handle events, layouting, layering, clipboard supporting and many other.

JSON UI definition

Follow JSON-like code style. Use JSON format to keep and load UI forms.

RPC, Restful IO

API and classes to communicate to XML-RPC, JSON-RPC, restful remote services and servers.

Look and feel customization

Flexible customization by JSON formatted configuration. Building UI themes by overloading standard JSON stuf.

Art coding

Easy to understand and use Zebra core OOP concept. Extendable hierarchy of Zebra classes. Free from typical DOM + JavaScript + CSS mess.

Zebra

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 samplesUI engine is handy and powerful Zebra package that can be helpful to implement own UI interface, work with canvas events and render graphical content		

Charts

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.