CheatGUI is a lightweight JavaScript library that provides a simple way to create draggable, collapsible, and customizable windows with various UI elements. Here are some of its advantages:
Live demo: https://cat-125.github.io/cheatgui/demo
To get started with CheatGUI, you need to include it in your project. Here's a step-by-step guide on how to do it:
Download the library: Download the CheatGUI library from the Releases page or use the beta builds available in the GitHub Actions.
Include the Library: First, include CheatGUI in your HTML file by using the following script and link tags. Make sure you replace path_to_cheatgui
with the actual path where the CheatGUI library is located.
<link rel="stylesheet" href="path_to_cheatgui/cheatgui.min.css">
<script src="path_to_cheatgui/cheatgui.min.js"></script>
Use CheatGUI: Once the library is included, you can create a new window.
const win = new cheatgui.Window({
x: 50,
y: 300,
width: 300,
height: 200,
title: "Window"
});
win.append(new cheatgui.Text('Hello, world!'));
Customize: You can customize CheatGUI by adding custom CSS styles or by modifying the configuration.
// Customizing CheatGUI
cheatgui.utils.loadTheme('path_to_theme.css');
cheatgui.utils.updateConfig({
symbols: {
expanded: '▼',
collapsed: '◀',
resize: '◢'
},
minWindowWidth: 150,
minWindowHeight: 100,
language: {
'close': 'Close'
}
});
For more detailed examples and advanced usage, please refer to the Documentation.
CheatGUI has several files that can be imported. Here are the differences between them:
cheatgui.min.js
, cheatgui.min.css
- compressed versions of the files. Most often they are needed.cheatgui.inj.js
- this file automatically embeds CSS code, and can be used for injection into third-party sites.const win = new cheatgui.Window({
x: 50,
y: 300,
width: 300,
height: 200,
title: "Window"
});
win.append(new cheatgui.Text('Hello, world!'));
const btn = new cheatgui.Button('Button');
btn.onClick(() => alert('Button clicked'));
win.append(btn);
const tree = new cheatgui.Tree("Tree");
win.append(tree);
tree.append(new cheatgui.Slider({
label: 'Float',
max: 1,
step: 0.01,
value: 0.5
}));
See also index.html
.
Documentation for CheatGUI is available at https://cat-125.github.io/cheatgui.
const widget = new cheatgui.WidgetName(...);
cheatgui.utils.loadTheme(url);
You can download and use themes from the themes/
folder or create your own.
cheatgui.openPopupMenu({title, items[], closable})
)cheatgui.utils
)Widget
class for creating custom widgetscheatgui.isMobile
)See CONTRIBUTING.md
for details.
CheatGUI is open-sourced software licensed under the MIT license.