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.471

🌌 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.16.0

📦 Built on Angular

22.0.0

📝 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.

🌐 Meet Assistant SaaS — meeting.corifeus.com

Don't want to install anything? Try the hosted version at meeting.corifeus.com — full meeting workflow built for European businesses, no setup, no API key, no command line.

What the hosted version offers:

• 21-language live translation during the meeting
• AI summaries, action items, decisions, attendees, key quotes auto-generated after every meeting
• Custom vocabulary — your client / company / industry terms corrected automatically (Pro+ tier)
• Searchable meeting library — find any decision or promise across all your past meetings
• Shareable read-only links — send a clean meeting summary to a client or teammate, no signup needed on their end
• One-click email summary after each meeting
• Premium engine on every plan — no downgraded model, ever
• EU billing — Stripe Tax + VAT-compliant + EUR-priced (Solo €19.99 / Pro €39.99 / Business €99.99 per month, no lock-in)
• GDPR-compliant by default — browser-language auto-detection, no tracking cookies, your meetings stored encrypted

Try the live demo (1 minute free, no signup) or browse the public sample meeting at meeting.corifeus.com/sample.

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 [email protected]"
• 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.471