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

> Explore Insomnia's React frontend stack. Discover key UI libraries like React 18, Tailwind CSS, React Aria, Monaco Editor, and TanStack Virtual used in their package.json.

- Repository: [Kong/insomnia](https://github.com/Kong/insomnia)
- Tags: deep-dive
- Published: 2026-06-27

---

**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`](https://github.com/Kong/insomnia/blob/main/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`](https://github.com/Kong/insomnia/blob/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`](https://github.com/Kong/insomnia/blob/main/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`](https://github.com/Kong/insomnia/blob/main/src/basic-components/button.tsx) leverages these primitives:

```tsx
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`](https://github.com/Kong/insomnia/blob/main/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:

```tsx
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`:

```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`](https://github.com/Kong/insomnia/blob/main/src/basic-components/icon.tsx) wraps these libraries:

```tsx
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:

```tsx
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`](https://github.com/Kong/insomnia/blob/main/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.