Web Desktop with Webix UI

A picture is worth a hundred words, and a nice live demo – even thousands. So don’t think – click on the image below and keep reading this article after watching the demo.


What is it

The demo above shows how the Web Desktop can be created on the base of Webix ui components. Such kind of shell can be used by remote user, providing them the desktop-like environment, where users can access the remote data and work with it. Users can launch inner apps, organize them on the screen, switch between them. All the same can be done with common desktop web apps. And it works in any browser ( even in IE8! )

How does it work

Demo is fully written in JavaScript and is using common Webix ui components. Main UI is created with a help of Layout and List components. Popup elements are Window widgets. Work area with icons is really a DataView component. Webix components allow to redefine their look and feel through CSS, and as you can see it can lead to the dramatic changes.

It may be a bit crazy to create a desktop-like shell in the browser, but why not. Webix is a powerful toolkit and it is not limited to the tables and buttons.

You can grab code of the demo from the GitHub repo. The demo itself is released under MIT license, so you can use it in any way. The demo apps embedded in demo are using some external components ( Gantt, Scheduler, Filemanager ) and are available under GPL license. If you need the same project for commercial usage – drop us an email.


What’s next

For now, Virtual web desktop is just a demo. While you can use it in web ui development, it doesn’t work as a standalone component, and may require a lot of code for proper integration. We are thinking about converting this demo to a standalone component, with rich API and documentation.

Please share your thoughts in comments. What do you think, does this demo need to be extended, or are there some other crazy things, which you wish to see implemented with Webix?

Written by
The following two tabs change content below.
Olga Vazhnik

Olga Vazhnik

Webix product manager. Interested in creating strong, hand over hand relationships between the company and its customers using Internet marketing.
  • Hi,

    I’ve noticed this demo yesterday, while looking into your github repo (btw, the link to this sample is and I must admit it looks wonderful!

    Talking about ideas, a very useful addition to this rich UI library would be a diagramming widget, especially a flowchart diagram providing nodes (a couple of shapes types), links and labels. I see this generally mentioned in the Wishlist area of the roadmap.

    To prove how much I would love to have this functionality included, I can help you with “Documentation and samples for Java” (part of Server Side Integrations, planned for Webix 3.4) while you can give this idea a priority.

    I would imagine a dashboard containing such flowcharts, rapidly providing info like workload, bottlenecks, and impact coverage.


    • Olga Vazhnik

      Hey Marius! Thank you for your nice feedback )) and i just changed the link (now it is correct) 😉

  • John Unland


    Just found the demo and I love it! I would definitely would love to use this in a open source source project I’m doing. It would even be better if this was fully implemented into the Webix library.

  • Josh

    Very nice. ExtJS had something like this a while back, and it was definitely useful. This is better. The model works well for replacing a thick client tool, such as what the RStudio web tool does. With that in mind, one can imagine a full Webix IDE built on this ui.

All posts: