Builld beautiful UI similar to real desktop.

Demo

See the live version .

• ✊ Drag & drop for desktop elements
• 📦 Basic elements included: Icon, Panel, Tooltip, Menu
• 📝 SVG Text with drop shadow and ellispis
• ✏️ Inline text editing (Panels)
• ↕️ Resizable elements

const desktop = jtop.init('jtop', {
 scrollView: {
 initY: 25
 }
});
const tooltop = desktop.tooltip({
 offsetLeft: 30,
 offsetTop: -120
});
const menu = jtop.popupmenu().addMenuElement(
 'open project',
 null,
 sender => {
 console.log(`open project ${sender.title}`);
 },
 'edit-item'
);
const icon = desktop
 .icon({ title: 'Icon', image: 'test/images/db.png', gridX: 1, gridY: 1 })
 .menu(cMenuProject)
 .tooltip(iconTooltip);

For more, visit the example page inside test directory and look into main.js.

• SVG - Custom graphics and effects
• require.js - Module Loader
• js-signals - Pub/Sub system
• underscore.js - Functional programming helpers

• Mike Skowronek - Initial work - coderitual

Jtop is available under the MIT license. See the LICENSE file for more info.