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

---

💿 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.451

🌌 Bugs are evident™ - MATRIX️
🚧 This project is under active development!
📢 We welcome your feedback and contributions.

NodeJS LTS is supported

🛠️ Built on NodeJs version

v24.14.1

📦 Built on Angular

21.2.8

📝 Description

The p3x-redis-ui-material package is the triple frontend for p3x-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:

P3XR_API_PORT=7844 yarn run dev-react

Angular development

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

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

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

# 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:

# 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 Network

AI-powered network & email toolkit — free, no signup.

Web · network.corifeus.com MCP · npm i -g p3x-network-mcp

• AI Network Assistant — ask in plain language, get a full domain health report
• Network Audit — DNS, SSL, security headers, DNSBL, BGP, IPv6, geolocation in one call
• Diagnostics — DNS lookup & global propagation, WHOIS, reverse DNS, HTTP check, my-IP
• Mail Tester — live SPF/DKIM/DMARC + spam score + AI fix suggestions, results emailed (localized)
• Monitoring — TCP / HTTP / Ping with alerts and public status pages
• MCP server — 17 tools exposed to Claude Code, Codex, Cursor, any MCP client
• Install — claude mcp add p3x-network -- npx p3x-network-mcp
• Try — "audit example.com", "why do my emails land in spam? test me@example.com"
• Source — patrikx3/network · patrikx3/network-mcp
• Contact — patrikx3.com · donate

---

❤️ 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, corifeus.eu, and 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 Build v2026.4.451