Skip to content

Latest commit

 

History

History
96 lines (72 loc) · 2.88 KB

README.md

File metadata and controls

96 lines (72 loc) · 2.88 KB
Raw

lexgui.js

lexgui.js is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. It provides an easy-to-use API for building dynamic and interactive common and complex editor interfaces without the need for tedious frameworks or big libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.

Code Editor

Node Graph Editor (WIP)

Component Features

  • Asset Browser
  • Timeline
  • Code Editor
  • Node Graphs (WIP)

Quick start

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();

Docs

The library documentation is available at lexgui.js/docs/.

Examples

Look at this examples to see how to create the different widgets and components!

Projects using lexgui.js

Animics (EU H2020 SignON project)

github.com/upf-gti/animics

scriptAnimation_signon

Performs (EU H2020 SignON project)

github.com/upf-gti/performs

scriptAnimation_signon

Feedback/Issues

You can use the repository issues section or simply write any feedback to [email protected].