Key UI Libraries Used by Insomnia: A Complete Analysis of Its React Frontend Stack

Insomnia's user interface is built on React 18, Tailwind CSS, React Aria Components, and specialized libraries like Monaco Editor and TanStack Virtual, all defined in packages/insomnia/package.json.

Insomnia, Kong's open-source API client, leverages a modern React ecosystem to deliver its desktop interface. The specific UI libraries and their versions are declared in the main packages/insomnia/package.json file, revealing a carefully curated stack focused on accessibility, performance, and developer experience.

Core React Framework and Rendering

At the foundation of Insomnia's UI sits React 18 (^18.3.1) paired with React DOM (^18.3.1). These libraries power the component architecture and handle the connection to Electron's renderer process. The application bootstraps in src/entry.client.tsx, which initializes the React root and mounts the application inside the Electron window.

Accessible Component Primitives

Insomnia prioritizes accessibility through the React Aria ecosystem. The codebase uses react-aria (3.43.2) for low-level ARIA-compliant hooks and state management, while react-aria-components (^1.12.2) provides high-level, unstyled components that handle keyboard navigation and screen reader support automatically.

For example, the Button component in src/basic-components/button.tsx leverages these primitives:

import { Button } from 'react-aria-components';

export const DeleteButton = () => (
  <Button
    className="flex items-center text-danger-600 hover:text-danger-500"
    onPress={() => deleteSelected()}
  >
    Delete
  </Button>
);

Similarly, modal dialogs in src/basic-components/modal.tsx implement full ARIA support for focus trapping and keyboard dismissal without manual attribute management.

Routing and Navigation

Navigation within the Electron application is handled by React Router (7.15.0). This library manages route definitions, loaders, and actions across the single-page application, enabling deep linking to specific workspaces, requests, and environments.

Layout and Virtualization

For complex UI layouts, Insomnia employs React Resizable Panels (^3.0.6) to create draggable split panes between request and response sections. When rendering large datasets—such as environment lists or collection trees—the application uses TanStack React Virtual (3.13.12) to maintain performance.

The virtualized environment list in src/routes/organization.$organizationId.environment.tsx demonstrates this pattern:

import { useVirtualizer } from '@tanstack/react-virtual';
import { useEnvironments } from 'models/environment';

export const EnvironmentList = () => {
  const environments = useEnvironments();
  const virtualizer = useVirtualizer({
    count: environments.length,
    getScrollElement: () => document.querySelector('#env-scroll'),
    estimateSize: () => 40,
  });

  return (
    <div id="env-scroll" className="h-64 overflow-y-auto">
      <div style={{ height: `${virtualizer.getTotalSize()}px` }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.key}
            style={{ transform: `translateY(${virtualRow.start}px)` }}
            className="px-2 py-1"
          >
            {environments[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
};

This approach ensures only visible rows are rendered, keeping the UI responsive even with hundreds of environments.

Code Editing and Syntax Highlighting

Insomnia integrates two distinct code editors. Monaco Editor (^0.52.2)—the same engine that powers VS Code—provides IntelliSense, auto-formatting, and language support for GraphQL and JSON in request bodies. The React wrapper @monaco-editor/react enables seamless integration within components, as seen in src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.request.new.tsx:

import Editor from '@monaco-editor/react';

export const RequestBodyEditor = ({ value, onChange }) => (
  <Editor
    height="200px"
    defaultLanguage="json"
    value={value}
    onChange={onChange}
    theme="vs-dark"
  />
);

For legacy UI sections, CodeMirror (^5.65.19) remains in use. Highlight.js (^11.11.1) handles syntax highlighting for read-only code display across the application.

Icon System

The interface uses Font Awesome icons delivered as SVGs for crisp rendering at any size. The stack includes:

• @fortawesome/fontawesome-svg-core (^6.7.2)
• @fortawesome/free-solid-svg-icons (^6.7.2)
• @fortawesome/free-regular-svg-icons (^6.7.2)
• @fortawesome/free-brands-svg-icons (^6.7.2)
• @fortawesome/react-fontawesome (^3.0.2)

The centralized icon component in src/basic-components/icon.tsx wraps these libraries:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

export const GithubLink = () => (
  <a href="https://github.com/Kong/insomnia" className="flex items-center">
    <FontAwesomeIcon icon={faGithub} className="mr-2" />
    GitHub
  </a>
);

Styling with Tailwind CSS

All UI components are styled using Tailwind CSS (^4.1.17), a utility-first CSS framework. The configuration in tailwind.config.cjs defines the design system, including the Typography plugin (@tailwindcss/typography ^0.5.16) for rich-text rendering.

To handle conditional class names without conflicts, Insomnia uses Tailwind Merge (^2.6.0) alongside clsx and classnames (^2.5.1). This pattern appears throughout the codebase for dynamic styling:

import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';

function Tab({ active }: { active: boolean }) {
  return (
    <div
      className={twMerge(
        'px-4 py-2 rounded',
        clsx({ 'bg-blue-500 text-white': active, 'bg-gray-200': !active })
      )}
    >
      Tab
    </div>
  );
}

Utility Hooks and Helpers

Additional state management helpers come from React Use (^17.6.0), a collection of essential hooks including useLocalStorage for persisting UI preferences. These utilities complement React's built-in hooks to handle common patterns without boilerplate.

Summary

• React 18 and React DOM provide the core rendering engine for the Electron application.
• React Aria Components deliver accessible, unstyled primitives for buttons, dialogs, and menus.
• TanStack React Virtual and React Resizable Panels handle performance-critical layouts and large data lists.
• Monaco Editor and CodeMirror power the code editing experience with syntax highlighting from Highlight.js.
• Font Awesome provides the complete icon system via SVG-based React components.
• Tailwind CSS with tailwind-merge and classnames manages all styling through utility classes.

Frequently Asked Questions

What version of React does Insomnia use?

Insomnia uses React 18 (^18.3.1) and React DOM (^18.3.1), as specified in packages/insomnia/package.json. This version supports concurrent features and automatic batching for improved performance in the Electron renderer.

How does Insomnia handle accessibility in its UI components?

Insomnia implements accessibility through React Aria (3.43.2) and React Aria Components (^1.12.2). These libraries provide ARIA-compliant hooks and pre-built components that manage focus rings, keyboard navigation, and screen reader announcements automatically.

Which code editor does Insomnia use for request bodies?

Insomnia primarily uses Monaco Editor (^0.52.2)—the same editor that powers VS Code—for request bodies, providing IntelliSense and syntax highlighting. It also maintains CodeMirror (^5.65.19) for legacy UI sections and uses Highlight.js (^11.11.1) for read-only syntax highlighting.

How does Insomnia manage styling across its components?

Insomnia uses Tailwind CSS (^4.1.17) as its styling framework, configured via tailwind.config.cjs. The application combines tailwind-merge (^2.6.0) and classnames (^2.5.1) to handle conditional class concatenation without utility conflicts, ensuring consistent theming across the interface.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}