Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview

DockView is a utility that adds a preview of the windows of the selected application in the macOS Dock. You just need to bring the mouse to its icon and thumbnails of all its windows will appear. By clicking on the one you need, you will immediately go to it. Through Window Thumbnails, you can quickly close, minify and manage windows. Features: Fast switching between windows of the selected application Window management (minimize, de-minimize, close) DockView doesn’t modify the Dock or any system file.PS: Block outgoing connections to Paddle etc.What’s New Version 2.1.7: Release notes were unavailable when this listing was updated.Compatibility macOS 10.12.0 or later Release Name: DockView 2.1.7Size: 6.2 MBLinks: HOMEPAGE – NFO – Torrent Search Download: RAPiDGATOR

# Building a Modular Panel-Based Management Software with React 19, TypeScript, and Dockview ## Introduction This article documents my experience designing and developing the frontend of a management software for a manufacturing company in the leather processing industry. The company had been using a legacy application developed over 20 years ago with outdated technologies — a slow, insecure Windows XP-era tool with a dated interface that had become increasingly difficult to maintain. The goal was clear: replace the old system with a modern, web-based solution without disrupting the established operational workflows that operators had been using for decades. ## The Project at a Glance The client needed a fast, modern web application accessible from any browser. The key requirements were: * **Modular panel interface** : Operators needed to work with multiple modules simultaneously, just like a desktop environment * **Modern UI** : Clean, intuitive, and responsive with dark/light theme support * **Performance** : Low latency for loading and saving data * **Security** : Two-factor authentication and granular permission management * **i18n** : Full support for Italian and English * **Keyboard shortcuts** : Speed up frequent operations like create, edit, save, and cancel ## Tech Stack The frontend was built entirely with modern tools: Layer | Technology ---|--- UI Framework | React 19 Language | TypeScript 5.9 (strict mode) Build Tool | Vite 7 Router | react-router v7 Server State | TanStack React Query 5 Client State | Zustand 5 HTTP Client | Axios 1 UI Library | Material-UI (MUI) 7 Panels | Dockview 5 Forms | react-hook-form Tables | material-react-table (MRT) i18n | i18next + react-i18next Notifications | notistack Dates | dayjs The backend (handled by a colleague) was built with Symfony (PHP), MySQL, and RESTful APIs with JWT cookie-based authentication. ## Architecture: The Modular Panel System The core of the application is a **Dockview** container that hosts all open panels — think of it as Visual Studio Code's tab system but for a business management app. Each panel corresponds to a specific business entity (contacts, batches, orders, etc.) and is built from three reusable generic components. ### The Three Generics 1. **GenericPanel** — The container component providing panel context and layout structure (list on top, form on bottom). 2. **GenericList** — A wrapper around material-react-table offering selection, sorting, and filtering out of the box. 3. **GenericForm** — The most complex component: it orchestrates the full CRUD lifecycle including button states, permissions, keyboard shortcuts, and confirmation dialogs. This abstraction was a game-changer for productivity. Instead of writing CRUD logic from scratch for each of the **50+ panels** , I defined these three generics once, and each specific panel only declares the variable parts: table columns, form fields, API endpoint, and translations. src/ ├── apps/ │ └── default/ # Entry point (main.tsx, provider hierarchy) ├── features/ │ ├── auth/ # Login, OTP, logout │ ├── authz/ # Permissions (resource-action based) │ ├── panels/ # Dockview panels (the heart of the app) │ ├── password-reset/ │ ├── profile/ │ ├── routing/ # Router and guards │ ├── search/ # Global search │ ├── settings/ │ └── user/ # User and role management └── shared/ ├── api/ # Axios layer, useApi, query keys ├── ui/ # Reusable UI components ├── themes/ # MUI light/dark themes ├── helpers/ # Utilities (language detection) └── interfaces/ # Shared TypeScript interfaces ## Factory Pattern for API Hooks One of the most impactful patterns I implemented was a **Factory Method** for generating CRUD API hooks. The `createPanelApiFactory` function automatically generates five TanStack Query hooks for any REST endpoint: export const batchApi = createPanelApi<IBatch>({ baseEndpoint: "/batch", queryKey: "BATCH" }); This single declaration produces: * `useGetList()` → `GET /batch` * `useGetDetail(id)` → `GET /batch/:id` * `usePost()` → `POST /batch` * `usePut()` → `PUT /batch/:id` * `useDelete()` → `DELETE /batch/:id` Each hook handles caching, automatic cache invalidation after mutations, and error handling. The factory completely abstracts HTTP complexity so the developer can focus on business logic. ## Isolated State Management with Zustand A tricky architectural challenge: users can open **multiple panels of the same type simultaneously**. Each instance must maintain its own independent state. The solution combines React Context with a Zustand factory. Every panel gets wrapped in its own React context, inside which a dynamic Zustand store is instantiated: Panel "Batches" #1 — context #1 → Zustand store #1 — { selectedId: 5, formEnabled: false } Panel "Batches" #2 — context #2 → Zustand store #2 — { selectedId: 12, formEnabled: true } Panel "Contacts" — context #3 → Zustand store #3 — { selectedId: 3, formEnabled: false } This guarantees complete state isolation: modifying a form on one panel never interferes with another. ## Cross-Panel Communication Here's my favorite feature. Imagine an operator is in the **Create Order** form and needs to select a contact that doesn't exist yet. They press Enter on the contact select field, and the system opens the **Create Contact** panel automatically. Once they save the new contact, the ID flows back to the original order form — without the user having to re-select anything. This was implemented using **React Query's cache as a communication bus**. The creating panel writes the newly created entity ID to a special query key (`LAST_CREATED`), and the receiving panel subscribes to changes on that key via a `useSubscribePanel` hook. No direct coupling between panels — the architecture stays modular and decoupled. ## Keyboard Shortcuts To match the operators' muscle memory from the old system, I implemented keyboard shortcuts: Key | Action ---|--- F4 | Enable editing on selected item F9 | Create new item F10 | Save current form Esc | Cancel operation / close floating panel Shortcuts only fire on the focused panel to avoid conflicts when multiple panels are open. ## Permission System — Three Layers of Security The authorization system operates on three levels: 1. **Component level** — Buttons and sections are conditionally rendered based on permissions. 2. **Hook level** — Permissions are verified before executing any operation. 3. **Engine level** — A centralized policy checker enforces rules globally. Users belong to groups (Admin, Staff), and each group has specific permissions on business resources (contacts, production, orders, etc.). The menu and routes are filtered automatically — operators only see what they're allowed to use. ## Results After three months of development, the frontend reached: * **50+ functional panels** across 10 business areas * **35,000+ lines of TypeScript** code * **3 reusable generic components** (GenericPanel, GenericList, GenericForm) * **Full CRUD** on every entity * **Cross-panel communication** via React Query cache * **Keyboard shortcuts** for all CRUD operations * **Italian/English i18n** with real-time switching * **Light/dark theme** persisted in user preferences * **Granular permission system** with three-level verification ## Challenges Faced No project is without its struggles. Here are the main ones: **Unclear requirements.** The client provided the legacy software without a structured analysis. Many features were discovered and implemented day by day. I often had to infer expected behavior by observing the old system. **Backend coordination.** APIs frequently returned data in different formats than agreed upon, or threw unexpected errors that required last-minute fixes. **Domain complexity.** The leather processing industry has highly specific production workflows. Understanding batch management, tanning stages, product composition, and leather logistics was essential to building an interface that truly matches how operators work. **Technical challenges.** Implementing isolated panel state, cross-panel data passing, concurrent cache synchronization, and multi-panel keyboard shortcuts — each problem pushed me to find creative solutions. ## What's Next The modular architecture makes it easy to extend. Future possibilities include: * **Automated tests** — Unit, integration, and E2E tests for robustness * **Performance optimizations** — Virtual scrolling, lazy loading, query optimization * **Custom layouts** — Let users save their own panel configurations * **AI assistant** — A chatbot that can perform CRUD operations via natural language ## Final Thoughts Working on this project was an incredible learning experience. Having full autonomy over the frontend architecture meant every decision — from library choices to design patterns — had a direct impact on the final product. The result is a production-ready application used by real operators every day, replacing a two-decade-old system with a modern, performant, and maintainable solution. _This article is based on my graduate thesis project for the Web Developer Full Stack program at ITS Digital Academy Mario Volpato._

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue.

Check out mathuo/dockview on GitHub

Provides R bindings to the 'dockview' 'JavaScript' library &lt;<a href="https://dockview.dev/" target="_top">https://dockview.dev/</a>&gt;. Create fully customizable grid layouts (docks) in seconds to include in interactive R reports with R Markdown or 'Quarto' or in 'shiny' apps &lt;<a href="https://shiny.posit.co/" target="_top">https://shiny.posit.co/</a>&gt;. In 'shiny' mode, modify docks by dynamically adding, removing or moving panels or groups of panels from the server function. Choose among 8 stunning themes (dark and light), serialise the state of a dock to restore it later.

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue. - mathuo/dockview