Light Command Palette is a lightweight, customizable command palette built using vanilla JavaScript and CSS. It's designed for projects that require a simple yet powerful command interface without the overhead of additional dependencies.
- 🪶 Lightweight: No heavy frameworks or libraries.
- ⚙️ Customizable: Easily style and configure to fit your project.
- ✅ Easy Integration: Simple setup for any web project.
npm install light-cmd-paletteimport { initializeCommandPalette } from 'light-cmd-palette/src/commandPalette.js';
import 'light-cmd-palette/src/commandPalette.css'
const commands = [
{ name: "Print", action: () => window.print() },
{ name: "Alert", action: () => alert("Executed Command 2") },
// Add more commands here
]
// These are the default options (optional), each element can be overriden when calling
// the initialize function
const options = {
shortcutKey: 'H', // Default key
ctrlKey: true, // Use Ctrl key
shiftKey: true, // Use Shift key
altKey: false // Do not use Alt key by default
};
initializeCommandPalette(commands, options)Light Command Palette can be included in your project by directly using the JavaScript and CSS files in the src directory.
The Light Command Palette is launched with the Ctrl+Shift+H command to avoid colissions with other shortcuts, but this can be customized to other combinations of Ctrl, Shift, Alt and letter keys.
To use Light Command Palette in your project, simply include the CSS and JS files in the src directory in your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... other head elements ... -->
<link rel="stylesheet" href="path/to/commandPalette.css">
</head>
<body>
<!-- ... your HTML content ... -->
<script type="module">
import { initializeCommandPalette } from 'path/to/commandPalette.js';
const commands = [
{ name: "Command 1", action: () => { /* Command 1 action */ } },
{ name: "Command 2", action: () => { /* Command 2 action */ } }
// ... other commands ...
];
initializeCommandPalette(commands);
</script>
</body>
</html>Or import the file in your JavaScript file directly:
import { initializeCommandPalette } from "path/to/commandPalette.js"
const commands = [
{ name: "Command 1", action: () => { /* Command 1 action */ } },
{ name: "Command 2", action: () => { /* Command 2 action */ } }
// ... other commands ...
];
initializeCommandPalette(commands, { shortcutKey: "P" });See examples/index.html for a complete example.
You can browse these examples with:
npx http-server examplesLight Command Palette uses Playwright for end-to-end testing. To run tests:
npm installnpm run lintnpm run testThis command will execute the tests defined in the Playwright configuration.
Contributions to Light Command Palette are welcome! Please read our contributing guidelines for details on how to submit pull requests, report issues, or request features.
MIT © Julian Mateu