{"id":13533360,"url":"https://github.com/itaditya/solid-command-palette","last_synced_at":"2025-04-08T04:19:56.535Z","repository":{"id":39904855,"uuid":"450847216","full_name":"itaditya/solid-command-palette","owner":"itaditya","description":"UI Library for Command Palette in SolidJS webapps","archived":false,"fork":false,"pushed_at":"2024-07-28T15:04:22.000Z","size":3371,"stargazers_count":157,"open_issues_count":13,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-10T21:19:35.061Z","etag":null,"topics":["command-palette","solid-js"],"latest_commit_sha":null,"homepage":"https://solid-command-palette.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itaditya.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-22T14:53:42.000Z","updated_at":"2024-09-27T18:24:22.000Z","dependencies_parsed_at":"2024-10-25T17:07:16.378Z","dependency_job_id":"72124cab-6c84-416c-a00c-3bb673591263","html_url":"https://github.com/itaditya/solid-command-palette","commit_stats":{"total_commits":137,"total_committers":1,"mean_commits":137.0,"dds":0.0,"last_synced_commit":"595a4a9c7cb7ee535c103669b788297bdbf004c3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fsolid-command-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fsolid-command-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fsolid-command-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Fsolid-command-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itaditya","download_url":"https://codeload.github.com/itaditya/solid-command-palette/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773869,"owners_count":20993657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["command-palette","solid-js"],"created_at":"2024-08-01T07:01:19.022Z","updated_at":"2025-04-08T04:19:56.507Z","avatar_url":"https://github.com/itaditya.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries","TypeScript"],"sub_categories":["Misc."],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"../public/images/branding/logo-light-horizontal-large.png#gh-light-mode-only\" width=\"650\" alt=\"Command Palette for Solid.js\" /\u003e\n  \u003cimg src=\"../public/images/branding/logo-dark-horizontal-large.png#gh-dark-mode-only\" width=\"650\" alt=\"Command Palette for Solid.js\" /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eBoost your users productivity by 10x 🚀\u003c/h1\u003e\n\n\u003cbr /\u003e\n\n### Some of the features offered by this library-\n\n1. Define actions with a simple config.\n1. Full keyboard support like open with \u003ckbd\u003eCMD\u003c/kbd\u003e + \u003ckbd\u003eK\u003c/kbd\u003e, navigate between actions using arrow keys.\n1. Fuzzy search between your actions on title, subtile, keywords.\n1. Bind custom keyboard shortcuts to your actions. They can be single letter, modifier combinations \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003el\u003c/kbd\u003e or sequences \u003ckbd\u003eg\u003c/kbd\u003e \u003ckbd\u003ep\u003c/kbd\u003e.\n1. Enable actions based on dynamic conditions.\n1. Share your app state and methods to run any kind of functionality from actions.\n1. Full static type safety across the board.\n\n## Demo\n\n![Solid Command Palette Demo](../public/images/demo-minimal.gif)\n\nTry the full demo on [our documentation site](https://solid-command-palette.vercel.app/demo).\n\n## Usage\n\n#### Install the library\n\n```sh\n# Core Library\nnpm install solid-command-palette\n\n# Peer Dependencies\nnpm install solid-transition-group tinykeys fuse.js\n```\n\n- [solid-transition-group](https://github.com/solidjs/solid-transition-group) (1.6KB): provides advanced animation support. It's the official recommendation from SolidJS team so you might be using it already.\n- [tinykeys](https://github.com/jamiebuilds/tinykeys) (700B): provides keyboard shortcut support. You can use this in your app for all kinds of keybindings.\n- [fuse.js](https://github.com/krisk/fuse) (5KB): provides fuzzy search support to find relevant actions.\n\n#### Integrate with app\n\n```jsx\n// define actions in one module say `actions.ts`\n\nimport { defineAction } from 'solid-command-palette';\n\nconst minimalAction = defineAction({\n  id: 'minimal',\n  title: 'Minimal Action',\n  run: () =\u003e {\n    console.log('ran minimal action');\n  },\n});\n\nconst incrementCounterAction = defineAction({\n  id: 'increment-counter',\n  title: 'Increment Counter by 1',\n  subtitle: 'Press CMD + E to trigger this.',\n  shortcut: '$mod+e', // $mod = Command on Mac \u0026 Control on Windows.\n  run: ({ rootContext }) =\u003e {\n    rootContext.increment();\n  },\n});\n\nexport const actions = {\n  [minimalAction.id]: minimalAction,\n  [incrementCounterAction.id]: incrementCounterAction,\n};\n```\n\n```jsx\n// render inside top level Solid component\n\nimport { Root, CommandPalette } from 'solid-command-palette';\nimport { actions } from './actions';\nimport 'solid-command-palette/pkg-dist/style.css';\n\nconst App = () =\u003e {\n  const actionsContext = {\n    increment() {\n      console.log('increment count state by 1');\n    },\n  };\n\n  return (\n    \u003cdiv class=\"my-app\"\u003e\n      \u003cRoot\n        actions={actions}\n        actionsContext={actionsContext}\n      \u003e\n        \u003cCommandPalette /\u003e\n      \u003c/Root\u003e\n    \u003c/div\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaditya%2Fsolid-command-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitaditya%2Fsolid-command-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaditya%2Fsolid-command-palette/lists"}