# This is a development package For the full-blown package, please follow: https://github.com/patrikx3/redis-ui https://www.npmjs.com/package/p3x-redis-ui https://corifeus.com/redis-ui [//]: #@corifeus-header [](https://www.npmjs.com/package/p3x-redis-ui-material) [](https://paypal.me/patrikx3) [](https://www.patrikx3.com/en/front/contact) [](https://www.facebook.com/corifeus.software) [](https://network.corifeus.com/status/31ad7a5c194347c33e5445dbaf8) --- # 💿 P3X Redis UI triple frontend — Angular + React/MUI + Vue/Vuetify with 54 languages, 7 themes, Socket.IO, desktop notifications, and full feature parity v2026.4.444 🌌 **Bugs are evident™ - MATRIX️** 🚧 **This project is under active development!** 📢 **We welcome your feedback and contributions.** ### NodeJS LTS is supported ### 🛠️ Built on NodeJs version ```txt v24.14.1 ``` # 📦 Built on Angular ```text 21.2.8 ``` # 📝 Description [//]: #@corifeus-header:end The `p3x-redis-ui-material` package is the **triple frontend** for [p3x-redis-ui](https://github.com/patrikx3/redis-ui). It provides three fully independent, feature-parity GUIs that connect to `p3x-redis-ui-server` via Socket.IO: ### Angular Frontend (`/ng/`) - **Angular** (latest LTS) with standalone components and Angular Signals - **Angular Material** component library - **Webpack** bundler with AOT compilation via `@ngtools/webpack` - **CDK virtual scrolling** for tree view performance ### React Frontend (`/react/`) - **React** (latest LTS) with functional components and hooks - **MUI (Material UI)** component library matching Angular Material's look and feel - **Vite** bundler — instant dev server startup and fast production builds - **Zustand** lightweight state management replacing Angular services - **@tanstack/react-virtual** for virtual scrolling ### Vue Frontend (`/vue/`) - **Vue 3** with Composition API and `<script setup>` - **Vuetify 3** component library matching Material Design - **Vite** bundler — instant dev server startup and fast production builds - **Pinia** state management replacing Angular services ### Shared Across All Three - **54 languages** with auto browser/system locale detection and "Auto (system)" option - **7 themes** — Light, Enterprise, Redis (light) + Dark, Dark Neu, Darko Bluo, Matrix (dark) — with auto system preference detection - **Same Socket.IO protocol** — identical backend API - **Same translation system** — single source of truth in `src/strings/` - **CodeMirror** JSON editor with GitHub dark/light themes - **uPlot** lightweight canvas charts for monitoring dashboards - **Web Worker tree building** — key sorting off the main thread - **Desktop notifications** — Electron native + Web Notification API - **Playwright E2E tests** — run against all three frontends in parallel - **Live switching** — toggle between Angular, React, and Vue in Settings ### ACL Management (Redis 6.0+) The first Redis GUI with a **visual ACL (Access Control List) editor**. No other Redis desktop tool provides this — not even RedisInsight. - **Auto-discovery** — ACL section appears in Settings only when connected to Redis 6.0+, auto-loads users - **Visual user list** — hoverable rows showing username, current user badge, disabled warning icon - **Chip-based permission editor** — commands, key patterns, and pub/sub channels as removable chips instead of raw text - Color-coded command chips: blue for allow (`+@all`), red for deny (`-@dangerous`) - Type and press Enter/Space/Comma to add chips - **Structured form** — enable/disable toggle, no-password checkbox, password field, separate fields for commands, keys, and channels - **Full CRUD** — create, edit, and delete ACL users with proper confirmation dialogs - **Safe editing** — resets permissions before applying changes so removed chips actually take effect - **Cluster-aware** — ACL SETUSER/DELUSER broadcast to all master nodes - **Readonly mode** — edit/delete/create buttons hidden when connection is readonly - **Guards** — cannot delete the `default` user or the currently connected user ### Project Structure ``` src/ ├── ng/ # Angular frontend │ ├── pages/ # Lazy-loaded page components │ ├── dialogs/ # Modal dialogs │ ├── components/ # Reusable UI components │ ├── services/ # Angular services (signals-based state) │ └── layout/ # App shell, header, footer ├── react/ # React frontend │ ├── pages/ # Page components (console, database, monitoring, search, settings, info) │ ├── dialogs/ # Modal dialogs │ ├── components/ # Reusable UI components │ ├── stores/ # Zustand stores (state management) │ ├── layout/ # App shell, header, footer │ ├── themes/ # MUI theme definitions │ ├── vite.config.ts # Vite configuration │ └── index.html # React entry HTML ├── vue/ # Vue frontend │ ├── pages/ # Page components │ ├── dialogs/ # Modal dialogs │ ├── components/ # Reusable UI components │ ├── stores/ # Pinia stores (state management) │ ├── layout/ # App shell, header, footer │ ├── themes/ # Vuetify theme definitions │ ├── vite.config.ts # Vite configuration │ └── index.html # Vue entry HTML ├── core/ # Shared utilities (detect-language, translation-loader) ├── strings/ # 54 language translation files │ ├── en/strings.js # English (primary) │ ├── de/strings.js # German │ └── .../strings.js # 52 more languages ├── scss/ # Shared theme CSS variables (7 themes) ├── public/ # Static assets (images, icons) └── tests/ # Playwright E2E tests ├── redis-ui.spec.js # Shared test spec (runs against all three GUIs) └── run-e2e.sh # Test runner script ``` ## NPM Scripts | Script | Description | |--------|-------------| | `yarn run dev` | Start Angular dev server (Webpack, port 8080) | | `yarn run dev-react` | Start React dev server (Vite, port 8082) | | `yarn run dev-vue` | Start Vue dev server (Vite) | | `yarn run build` | Production build Angular → `dist/` | | `yarn run build-react` | Production build React → `dist-react/` | | `yarn run build-vue` | Production build Vue | | `yarn run stats` | Angular bundle analysis with `webpack-bundle-analyzer` | | `yarn run test:e2e` | Run Playwright E2E tests (Angular + React + Vue) | | `yarn run test:e2e:gui` | Run E2E tests with Playwright UI | ## Development For file names do not use camelCase, but use kebab-case. Folder should be named as kebab-case as well. As you can see, all code filenames are using it like that, please do not change that. Please apply the `.editorconfig` settings in your IDE. ### Prerequisites Requires a running `p3x-redis-ui-server` backend (default port 7843). Override with `P3XR_API_PORT`: ```bash P3XR_API_PORT=7844 yarn run dev-react ``` ### Angular development ```bash yarn install yarn run dev ``` - Dev server: http://localhost:8080/ng/ - Webpack proxies Socket.IO to backend on port 7843 - Hot module reload enabled - CSP headers configured for development ### React development ```bash yarn install yarn run dev-react ``` - Dev server: http://localhost:8082/react/ - Vite proxies Socket.IO to backend on port 7843 - Instant HMR via Vite's native ESM - CJS translation files auto-transformed to ESM via custom plugin ### Vue development ```bash yarn install yarn run dev-vue ``` - Vite proxies Socket.IO to backend on port 7843 - Instant HMR via Vite's native ESM ### Running all three simultaneously ```bash # Terminal 1: Angular yarn run dev # Terminal 2: React yarn run dev-react # Terminal 3: Vue yarn run dev-vue # Terminal 4: Backend cd ../redis-ui-server && yarn run dev ``` ## Key Dependencies All dependencies track the latest LTS versions and are regularly upgraded. ### Angular (devDependencies — bundled at build time) | Package | Purpose | |---------|---------| | `@angular/core` | Framework | | `@angular/material` | UI component library | | `@angular/cdk` | Virtual scrolling, drag-drop | | `@ngtools/webpack` | AOT compilation | | `webpack` | Bundler | | `typescript` | Type system | ### React (dependencies — shipped in npm package) | Package | Purpose | |---------|---------| | `react` | Framework | | `@mui/material` | UI component library | | `zustand` | State management | | `@tanstack/react-virtual` | Virtual scrolling | | `react-router-dom` | Client-side routing | | `vite` | Bundler (devDependency) | ### Vue (dependencies — shipped in npm package) | Package | Purpose | |---------|---------| | `vue` | Framework | | `vuetify` | UI component library | | `vue-router` | Client-side routing | | `pinia` | State management | | `@tanstack/vue-virtual` | Virtual scrolling | | `vuedraggable` | Drag-and-drop | | `vite` | Bundler (devDependency) | ### Shared | Package | Purpose | |---------|---------| | `socket.io-client` | Real-time communication with backend | | `codemirror` + `@codemirror/*` | JSON editor | | `uplot` | Lightweight canvas charts (monitoring) | | `jspdf` | PDF export | | `jszip` | ZIP export (memory analysis) | | `@dnd-kit/*` | Drag-and-drop (connection groups) | | `lodash` | Utility functions (merge for i18n) | ## E2E Testing Playwright tests run against all three frontends in parallel using a shared test spec: ```bash # Run all tests (Angular + React + Vue) yarn run test:e2e # Run with Playwright UI yarn run test:e2e:gui ``` Tests cover: connect, disconnect, key operations, search, settings, monitoring, and GUI switching. [//]: #@corifeus-footer --- ## 🚀 Quick and Affordable Web Development Services If you want to quickly and affordably develop your next digital project, visit [corifeus.eu](https://corifeus.eu) for expert solutions tailored to your needs. --- ## 🌐 Powerful Online Networking Tool Discover the powerful and free online networking tool at [network.corifeus.com](https://network.corifeus.com). **🆓 Free** Designed for professionals and enthusiasts, this tool provides essential features for network analysis, troubleshooting, and management. Additionally, it offers tools for: - 📡 Monitoring TCP, HTTP, and Ping to ensure optimal network performance and reliability. - 📊 Status page management to track uptime, performance, and incidents in real time with customizable dashboards. All these features are completely free to use. --- ## ❤️ Support Our Open-Source Project If you appreciate our work, consider ⭐ starring this repository or 💰 making a donation to support server maintenance and ongoing development. Your support means the world to us—thank you! --- ### 🌍 About My Domains All my domains, including [patrikx3.com](https://patrikx3.com), [corifeus.eu](https://corifeus.eu), and [corifeus.com](https://corifeus.com), are developed in my spare time. While you may encounter minor errors, the sites are generally stable and fully functional. --- ### 📈 Versioning Policy **Version Structure:** We follow a **Major.Minor.Patch** versioning scheme: - **Major:** 📅 Corresponds to the current year. - **Minor:** 🌓 Set as 4 for releases from January to June, and 10 for July to December. - **Patch:** 🔧 Incremental, updated with each build. **🚨 Important Changes:** Any breaking changes are prominently noted in the readme to keep you informed. --- [**P3X-REDIS-UI-MATERIAL**](https://corifeus.com/redis-ui-material) Build v2026.4.444 [](https://www.npmjs.com/package/p3x-redis-ui-material) [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QZVM4V6HVZJW6) [](https://www.patrikx3.com/en/front/contact) [](https://www.facebook.com/corifeus.software) [//]: #@corifeus-footer:end