lexgui.js is a lightweight JavaScript library for building web interfaces. No bloated frameworks, no unnecessary complexity, just pure HTML, CSS, and JavaScript magic. It gives you an easy API for crafting dynamic, interactive editor interfaces without the headache of big libraries.
NPM Package: npmjs.com/package/lexgui
 |
 |
 |
 |
- Asset Browser
- Timeline
- Code Editor
- Node Graphs (WIP)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My first lexgui.js app</title>
<link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^<version>/build/lexgui.css">
<script type="importmap">
{
"imports": {
"lexgui": "https://cdn.skypack.dev/lexgui@^<version>/build/lexgui.module.js",
"lexgui/components/": "https://cdn.skypack.dev/lexgui@^<version>/build/components/"
}
}
</script>
</head>
<body>
<script type="module" src="my_app.js"></script>
<body>
</html>my_app.js:
import { LX } from 'lexgui';
// Using components
import { CodeEditor } from 'lexgui/components/codeeditor.js';
// Create main area
let area = LX.init();
// Create area panels
let panel = area.addPanel();
// Start branch/section
panel.branch("Section Title");
// Add some widgets
panel.addButton(null, "Click me, Im Full Width...");
panel.addText("Text", "Warning text", null, { warning: true });
// Close section
panel.merge();The library documentation is available at lexgui.js/docs/.
Look at this examples to see how to create the different widgets and components!
github.com/upf-gti/animics |
github.com/upf-gti/performs |
You can use the repository issues section or simply write any feedback to [email protected].