Frontend Dependencies Used in LLM Wiki: A Complete Technical Breakdown

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.

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 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. 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 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.

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).

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 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.

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).

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 and configured in src-tauri/Cargo.toml.

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.
• 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.

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.

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 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 and 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.

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