Loading repository data…
julianmateu / repository
A lightweight, customizable command palette built using vanilla JavaScript and CSS.
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.
npm install light-cmd-palette
import { 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 examples
Light Command Palette uses Playwright for end-to-end testing. To run tests:
npm install
npm run lint
npm run test
This 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
Selected from shared topics, language and repository description—not editorial ratings.
pulsardev /
Vue Tour is a lightweight, simple and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application.
noelboss /
Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total.
ismail9k /
A highly customizable, lightweight Vue 3 carousel component for your next awesome project.
RyanFitzgerald /
A lightweight, customizable personal blog template built with GatsbyJS and React
A cross-platform, smooth, lightweight, customizable PIN code input component for React Native.
bluzky /
A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns