# Frontend Dependencies Used in LLM Wiki: A Complete Technical Breakdown

> Explore the frontend dependencies of LLM Wiki including React, Vite, and Tailwind CSS. Get a complete technical breakdown of libraries used for markdown, graphs, and desktop integration.

- Repository: [nash_su/llm_wiki](https://github.com/nashsu/llm_wiki)
- Tags: deep-dive
- Published: 2026-09-13

---

**LLM Wiki uses React 19, Vite 8, and Tailwind CSS 4.2 as its core foundation, augmented by specialized libraries for markdown rendering, interactive graph visualization, and Tauri-based desktop integration, all strictly declared in [`package.json`](https://github.com/nashsu/llm_wiki/blob/main/package.json).**

The open-source repository `nashsu/llm_wiki` implements a modern knowledge-management interface that combines cutting-edge web technologies with native desktop capabilities. Understanding the frontend dependencies used in LLM Wiki reveals how the application achieves its reactive, markdown-centric user experience across both browser and desktop environments.

## Core Framework and Build Pipeline

### React 19 and the Modern Component Model

At the heart of the application lies **React 19** (`react` ^19.0.0 and `react-dom` ^19.0.0), declared in [`package.json`](https://github.com/nashsu/llm_wiki/blob/main/package.json) lines 47-48. This latest major version provides the concurrent rendering capabilities and automatic batching that power the UI's responsive state updates.

### Vite 8 for Build Optimization

The project uses **Vite 8** as its build tool and development server, configured in [`vite.config.ts`](https://github.com/nashsu/llm_wiki/blob/main/vite.config.ts). This choice enables rapid hot-module replacement and optimized production bundles for the knowledge-base interface.

### Tailwind CSS 4.2 and Design Tokens

Styling relies on **Tailwind CSS 4.2** (`tailwindcss` ^4.2.2), integrated via `@tailwindcss/vite` ^4.2.2 as shown in [`package.json`](https://github.com/nashsu/llm_wiki/blob/main/package.json) lines 27-30. The stack includes `tailwind-merge` ^3.5.0 for deduplicating conflicting classes and `tw-animate-css` ^1.4.0 for animation utilities. The `clsx` ^2.1.1 utility (line 36) handles conditional class-name concatenation, while `class-variance-authority` ^0.7.1 (line 35) assists with dynamic Tailwind class composition.

## Component Architecture and State Management

### Base UI Primitives and shadcn/ui

Rather than building components from scratch, LLM Wiki leverages **@base-ui/react** ^1.3.0 (line 20), which provides accessible low-level UI primitives including buttons and dialogs. These unstyled components form the foundation for the application's interaction patterns. The project incorporates **shadcn** ^4.1.2 (line 55), a component library built specifically on Tailwind CSS that provides pre-built patterns for forms and dialogs while maintaining full style customization.

### Zustand for Global State

For global state management, the application uses **Zustand** ^5.0.12 (line 60), a lightweight hook-based store. This handles UI state such as the currently selected graph node without the boilerplate of larger flux architectures, as implemented in the component tree rooted at [`src/App.tsx`](https://github.com/nashsu/llm_wiki/blob/main/src/App.tsx).

### Visual Assets

Visual elements are reinforced by **lucide-react** ^1.7.0 (line 44) for the icon set and **@fontsource-variable/geist** ^5.2.8 (line 21) for the variable-weight Geist font used throughout the interface.

## Markdown Processing and Rich Text Editing

### Rendering Markdown with Math Support

The application renders user-generated content using **react-markdown** ^10.1.0, extended with **remark-gfm** ^4.0.1 for GitHub-flavored tables, **remark-math** ^6.0.0 for math syntax parsing, and **rehype-katex** ^7.0.1 with **katex** ^0.16.45 for LaTeX rendering (lines 50-55).

```tsx
import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

const content = `

# Example

Inline math: $E = mc^2$

\`\`\`math
\\int_{a}^{b} f(x)dx
\`\`\`
`;

export default function MarkdownViewer() {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[rehypeKatex]}
    >
      {content}
    </ReactMarkdown>
  );
}

```

This implementation in [`src/App.tsx`](https://github.com/nashsu/llm_wiki/blob/main/src/App.tsx) demonstrates how remark and rehype plugins transform markdown strings into rendered HTML with mathematical notation.

### Milkdown WYSIWYG Editor

For note-taking capabilities, LLM Wiki integrates **@milkdown/react** ^7.20.0 with **@milkdown/kit** ^7.20.0 and the **@milkdown/theme-nord** ^7.20.0 theme (lines 22-25). The **@milkdown/plugin-math** ^7.5.9 extension adds mathematical expression support to the editor.

```tsx
import { Milkdown } from "@milkdown/react";
import { nord } from "@milkdown/theme-nord";
import { math } from "@milkdown/plugin-math";

export default function Editor() {
  return (
    <Milkdown
      plugins={[math]}
      theme={nord}
      defaultValue={"Write **markdown** with $x^2$ here..."}
    />
  );
}

```

## Graph Visualization Engine

### Sigma.js and Graphology Integration

Knowledge graph visualization relies on **@react-sigma/core** ^5.0.6 (line 26), which provides React bindings for **sigma** ^3.0.2 (line 27). The underlying graph data structures use **graphology** ^0.26.0, with **graphology-layout-forceatlas2** ^0.10.1 for force-directed layouts and **graphology-communities-louvain** ^2.0.2 for community detection algorithms (lines 37-40).

```tsx
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
import { Graph } from "graphology";

const graph = new Graph();
// add nodes & edges ...
export default function KnowledgeGraph() {
  const load = useLoadGraph();
  React.useEffect(() => {
    load(graph);
  }, [load]);
  return <SigmaContainer style={{ height: "500px" }} />;
}

```

This pattern combines `@react-sigma/core` with `graphology` for interactive knowledge graph rendering within the React component tree.

## Desktop Integration via Tauri

### Native OS Capabilities

When bundled as a desktop application, the frontend dependencies include **@tauri-apps/api** ^2.11.0 and specialized plugins: **@tauri-apps/plugin-dialog** ^2.7.1 for file choosers, **@tauri-apps/plugin-http** ^2.5.9 for network requests, **@tauri-apps/plugin-store** ^2.4.3 for local storage, **@tauri-apps/plugin-autostart** ^2.5.1 for startup management, and **@tauri-apps/plugin-opener** ^2.5.4 for external links (lines 28-33). These are backed by the Rust implementation in [`src-tauri/src/main.rs`](https://github.com/nashsu/llm_wiki/blob/main/src-tauri/src/main.rs) and configured in [`src-tauri/Cargo.toml`](https://github.com/nashsu/llm_wiki/blob/main/src-tauri/Cargo.toml).

```tsx
import { dialog } from "@tauri-apps/plugin-dialog";

async function openFile() {
  const file = await dialog.open();
  console.log("User selected:", file);
}

```

This code demonstrates how the React frontend invokes native file dialogs through the Tauri bridge.

## Internationalization and File Utilities

### Multi-Language Support

Runtime translation handling uses **i18next** ^26.0.3 with **react-i18next** ^17.0.2 (lines 40-41), enabling the interface to support multiple languages without page reloads.

### Data Processing and Document Rendering

File operations rely on **js-yaml** ^4.1.1 for parsing YAML configuration files and **jszip** ^3.10.1 for creating ZIP archives during project export (lines 34-43). Document preview capabilities use **pdfjs-dist** ^5.7.284 (line 46) for PDF rendering, while **mermaid** ^11.14.0 (line 45) renders flowcharts and sequence diagrams directly from markdown code blocks.

## Summary

- LLM Wiki uses **React 19**, **Vite 8**, and **Tailwind CSS 4.2** as its foundational frontend dependencies, defined in [`package.json`](https://github.com/nashsu/llm_wiki/blob/main/package.json).
- The stack includes specialized libraries for markdown rendering (`react-markdown`, `remark-gfm`, `rehype-katex`) and WYSIWYG editing (`@milkdown/react`, `@milkdown/plugin-math`).
- Interactive knowledge graphs are powered by **Sigma.js** and **Graphology**, with **Zustand** managing global UI state such as selected nodes.
- Desktop functionality extends the web codebase via Tauri plugins that bridge to native OS capabilities through the Rust backend in [`src-tauri/src/main.rs`](https://github.com/nashsu/llm_wiki/blob/main/src-tauri/src/main.rs).

## Frequently Asked Questions

### What UI component library does LLM Wiki use?

The application combines **@base-ui/react** ^1.3.0 for low-level accessible primitives with **shadcn** ^4.1.2 components styled via Tailwind CSS. This architecture provides pre-built patterns for dialogs and forms while maintaining full customization through the Tailwind configuration in [`vite.config.ts`](https://github.com/nashsu/llm_wiki/blob/main/vite.config.ts).

### How does LLM Wiki render mathematical equations?

The frontend uses a dual approach: **react-markdown** with **remark-math** and **rehype-katex** for rendering static markdown containing math, and **@milkdown/plugin-math** for WYSIWYG editing of mathematical expressions. Both pipelines rely on **katex** ^0.16.45 for the actual LaTeX-to-HTML conversion, as declared in [`package.json`](https://github.com/nashsu/llm_wiki/blob/main/package.json) lines 50-55.

### Is LLM Wiki only a web application, or does it run as a desktop app?

While built as a web frontend using React and Vite, LLM Wiki is also distributed as a native desktop application using **Tauri**. The frontend dependencies include **@tauri-apps/api** ^2.11.0 and associated plugins that communicate with the Rust backend defined in [`src-tauri/Cargo.toml`](https://github.com/nashsu/llm_wiki/blob/main/src-tauri/Cargo.toml) and [`src-tauri/src/main.rs`](https://github.com/nashsu/llm_wiki/blob/main/src-tauri/src/main.rs).

### What library handles the knowledge graph visualization?

The knowledge graph feature uses **@react-sigma/core** ^5.0.6 for React integration with the Sigma.js rendering engine, while **graphology** ^0.26.0 provides the underlying graph data structure and algorithms including ForceAtlas2 layout and Louvain community detection.