Skip to main content

Monokle Desktop Architecture

Monokle Desktop is an Electron desktop application built with React & TypeScript.

Redux Toolkit is used for state management.

Visuals are done using Ant Design.

Other fairly common libraries/frameworks are used internally for common functionality (see components below).

This project was bootstrapped from, which provides:

  • TypeScript support for Electron main process source code.
  • Hot-relaod support for Electron app.
  • Electron-builder support.

See for more info on Electron-builder.

Folder Structure

  • /electron : Electron main thread - contains startup code and some ipc handlers invoked from the UI.
  • /src : Root for Monokle Desktop UI application - contains App.tsx, Index.tsx, etc.
    • /components : UI components - coarse to fine grained; organisms -> molecules -> atoms
    • /constants : constants..
    • /models : type definitions for core objects (see below) and states
    • /redux : redux-related code (selectors, hooks, store, reducers, thunks, services)
    • /styles : styles..
    • /utils : common utility functions
    • /assets : icons/images/etc

Core Objects

  • Most logic revolves around K8sResource objects which "encapsulate" all data associated with a parsed resource.
  • FileEntry objects correspond to a parsed file - which can contain 0..n K8s Resource objects.
  • The AppState holds the main state of the application (see inline comments), state changes are handled by the main reducer and corresponding thunks

Main UI Components

The content of most high level organisms and molecules should be fairly self-explanatory. A few highlights:

  • The FileTreePane renders the selected folder.
  • The NavigatorPane renders the main resource navigator, including sections for Helm Charts and Kustomizations.
  • The Monaco component renders the source editor using the Monaco editor (same as used by VS Code).
  • The FormEditor component renders nice forms for K8sResources using the react-jsonschema-form component (see below), corresponding schemas/uiSchemas are in the resources/form-schemas folder.

3rd Party Components Used

Dev Dependencies

K8s Schemas

Monokle Desktop currently uses the latest 1.22.1 schemas for validation and editor functionality - see this issue for making schema version configurable.

Schemas are currently taken from - strict version is used.