https://github.com/theryansmee/taskflow-ngx-command-palette-demo
AI-generated Angular demo app (TaskFlow) showcasing @theryansmee/ngx-command-palette — a keyboard-driven command palette with custom item templates, search, and navigation.
https://github.com/theryansmee/taskflow-ngx-command-palette-demo
ai-generated angular angular-components angular22 command-palette demo keyboard-shortcuts ngx-command-palette typescript ui-components
Last synced: 7 days ago
JSON representation
AI-generated Angular demo app (TaskFlow) showcasing @theryansmee/ngx-command-palette — a keyboard-driven command palette with custom item templates, search, and navigation.
- Host: GitHub
- URL: https://github.com/theryansmee/taskflow-ngx-command-palette-demo
- Owner: theryansmee
- Created: 2026-07-17T20:03:34.000Z (10 days ago)
- Default Branch: main
- Last Pushed: 2026-07-17T20:46:06.000Z (10 days ago)
- Last Synced: 2026-07-17T22:24:22.433Z (10 days ago)
- Topics: ai-generated, angular, angular-components, angular22, command-palette, demo, keyboard-shortcuts, ngx-command-palette, typescript, ui-components
- Language: TypeScript
- Homepage:
- Size: 136 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TaskFlow — ngx-command-palette demo
> ⚠️ **This is not a real app.** TaskFlow is an AI-generated demo project built purely to showcase [`@theryansmee/ngx-command-palette`](https://github.com/theryansmee/ngx-command-palette) in a realistic-looking Angular application. There is no backend — all data is mocked in-memory — and it is not intended for production use.
TaskFlow is a Linear/Jira-style project management UI (dashboard, board, backlog, timeline, projects, team, activity, settings) built with Angular 22. Its only purpose is to demonstrate what integrating a command palette into a real-world app looks like.
## 🚀 Try it live
**[Open the demo on StackBlitz](https://stackblitz.com/~/github.com/theryansmee/taskflow-ngx-command-palette-demo)** — once it loads, press ⌘K / Ctrl+K and try:
- **Change the theme with sub-commands** — run `Change Theme...` and pick Light / Dark / System from its child page (same for `Set Density...`)
- **Navigate anywhere** — `Go to Board`, `Go to Dashboard`, `Go to Team`, … every page is a command away
- **Drill into a project** — `Open Project...` opens a child page listing every project, then its views (Board, List, Timeline, Backlog)
- **Search issues asynchronously** — `Search Issues...` queries the mock API by key, title, or description as you type
- **Find a teammate** — `Find Teammate...` searches users and jumps to their profile
- **Fuzzy-search everything** — just start typing from the root; commands, pages, and projects all match
## What this demonstrates
`main` integrates [`@theryansmee/ngx-command-palette`](https://www.npmjs.com/package/@theryansmee/ngx-command-palette), showing:
- **Global keyboard-driven palette** — open it with ⌘K / Ctrl+K from anywhere in the app
- **Navigation commands** — jump to any page (board, backlog, timeline, settings, …)
- **Custom item templates** — richer palette items than plain text
- **Async/searchable data** — palette items backed by a mock API service
Compare with the [`base-project-without-command-palette`](../../tree/base-project-without-command-palette) branch to see the same app **without** the palette — the diff between the two branches is the entire integration, a useful guide for adding the palette to your own app.
## Links
- 📦 npm: [`@theryansmee/ngx-command-palette`](https://www.npmjs.com/package/@theryansmee/ngx-command-palette)
- 💻 Library source: [theryansmee/ngx-command-palette](https://github.com/theryansmee/ngx-command-palette)
## Running the demo
```bash
npm install
npm start
```
Then open `http://localhost:4200/` and press ⌘K (or Ctrl+K).
## Branches
| Branch | Contents |
| --- | --- |
| [`main`](../../tree/main) | TaskFlow with `@theryansmee/ngx-command-palette` integrated |
| [`base-project-without-command-palette`](../../tree/base-project-without-command-palette) | The base TaskFlow app, no command palette |