# What Technologies Are Used in the OpenMAIC Presentation Layer: A Complete Stack Breakdown > Discover the technologies powering OpenMAIC's presentation layer. Explore React 19, Next.js 16, TypeScript, Tailwind CSS v4, and Radix UI/shadcn/ui for an accessible stack. - Repository: [MAIC/OpenMAIC](https://github.com/THU-MAIC/OpenMAIC) - Tags: deep-dive - Published: 2026-09-12 --- **OpenMAIC's presentation layer is built on a modern React 19 and Next.js 16 stack, utilizing TypeScript for type safety, Tailwind CSS v4 for styling, and Radix UI primitives combined with shadcn/ui for accessible components.** The OpenMAIC repository (THU-MAIC/OpenMAIC) delivers a sophisticated workbench interface for machine learning and AI workflows. Its front-end architecture combines cutting-edge web technologies with specialized libraries for data visualization, mathematical rendering, and interactive node-based editing. ## Core Framework and Language OpenMAIC anchors its presentation layer on the latest generation of React ecosystem tools. This foundation provides server-side rendering capabilities and strict type enforcement throughout the codebase. ### Next.js 16 and React 19 The application runs on **Next.js v16**, configured in [`next.config.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/next.config.ts), which handles routing, optimization, and static generation for the web UI. This framework wraps **React v19**, declared in [`package.json`](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json), serving as the core library for all interactive components. ### TypeScript Configuration **TypeScript** enforces static typing across the entire front-end codebase. The configuration in [`tsconfig.json`](https://github.com/THU-MAIC/OpenMAIC/blob/main/tsconfig.json) ensures type safety for props, state, and API interactions, reducing runtime errors in complex workbench components. ## Styling and Component Architecture The UI implements a utility-first approach with accessible primitives, creating a consistent design system that scales across the application. ### Tailwind CSS v4 **Tailwind CSS v4** (referenced implicitly via dependencies and configuration files like [`tailwind.config.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/tailwind.config.ts)) provides the utility-first CSS framework responsible for layout, responsive design, and theming. The system uses `twMerge` and `clsx` (both listed in [`package.json`](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json)) to handle conditional className construction cleanly. ### Radix UI and shadcn/ui The component layer builds upon **Radix UI** primitives—including checkbox, popover, slider, and switch components—for accessibility and keyboard navigation. These primitives are styled through **shadcn/ui**, a design system that provides pre-built, customizable UI blocks used throughout the workbench interface. ### Iconography **lucide-react** supplies the scalable SVG icon set rendered across toolbars, navigation panels, and action buttons in the workbench UI. ## Visualization and Interactive Media OpenMAIC handles complex data representations through specialized libraries for graphs, charts, and animations. ### Node-Based Editing The interactive canvas uses **@xyflow/react** to render node-graph visualizations, enabling users to construct and manipulate ML pipelines visually within the workbench environment. ### Data Charts **ECharts** powers high-performance charting widgets for data visualization, while **embla-carousel-react** implements lightweight carousels for UI tours and media previews. ### Animation Stack Motion design relies on multiple libraries: **GSAP** for timeline-based animations, **motion** for React-specific physics and transitions, and **animate.css** for CSS-based effects. ## State Management and Utilities Managing complex UI state requires lightweight, performant solutions. ### Zustand and Immer **Zustand** provides the global state store for workbench sessions, avoiding prop drilling across deeply nested component trees. **Immer** accompanies it as an immutable-update helper, simplifying state modifications in `lib/workbench/*.tsx` files. ### Class Name Utilities The codebase consistently employs **clsx** and **tailwind-merge** to combine and deduplicate Tailwind classes dynamically, ensuring predictable styling in conditional render scenarios. ## Content Processing and Typography The presentation layer handles rich text, mathematical notation, and optimized assets. ### Rich Text Editing The **prosemirror** suite powers the content editor, while **turndown**, **sanitize-html**, and **remark-cjk-friendly** handle markdown conversion, HTML sanitization, and CJK character processing respectively. ### Mathematical Rendering **KaTeX**, **temml**, and **mathml2omml** render inline and block mathematical expressions, essential for displaying ML formulas and algorithmic documentation. ### Font and Image Assets **@fontsource** families (including Inter, JetBrains Mono, and Noto Sans) load variable fonts for consistent typography. Server-side image processing utilizes **sharp** for resizing and format conversion during uploads. ## Implementation Example Components in `lib/workbench/*.tsx` integrate these technologies to create cohesive UI elements. The following example from the workbench demonstrates imports from React, Zustand, Radix UI, Lucide icons, and motion libraries working together: ```tsx import { useEffect } from 'react'; import { useWorkspaceStore } from '@/lib/workbench/use-workbench-session'; import { Switch } from '@radix-ui/react-switch'; import { Moon } from 'lucide-react'; import { motion } from 'motion'; import clsx from 'clsx'; import { twMerge } from 'tailwind-merge'; export function DarkModeToggle() { const { darkMode, setDarkMode } = useWorkspaceStore(state => ({ darkMode: state.darkMode, setDarkMode: state.setDarkMode, })); // Animate the toggle on mount useEffect(() => { motion.animate('.toggle', { scale: [0, 1] }, { duration: 0.4 }); }, []); return (
); } ``` ## Summary - OpenMAIC combines **Next.js 16**, **React 19**, and **TypeScript** as its foundational framework - **Tailwind CSS v4** and **shadcn/ui** (built on **Radix UI**) provide the styling and component architecture - Visualization relies on **@xyflow/react** for node graphs, **ECharts** for data charts, and **embla-carousel-react** for media - **Zustand** with **Immer** manages global state, while **GSAP** and **motion** handle animations - Content features utilize **prosemirror**, **KaTeX**, and **@fontsource** for rich text, math rendering, and typography - All components reside in `lib/workbench/*.tsx`, importing utilities like `clsx` and `tailwind-merge` for class management ## Frequently Asked Questions ### What framework does OpenMAIC use for its front-end? OpenMAIC uses **Next.js v16** as its application framework, running on top of **React v19**. This combination provides server-side rendering capabilities, optimized routing, and the latest React features for the presentation layer. ### How does OpenMAIC handle complex node-based visualizations? The implementation uses **@xyflow/react** to power interactive node-graph visualizations within the workbench canvas. This library enables users to drag, connect, and configure ML pipeline nodes through an intuitive graphical interface defined in components like [`lib/workbench/workspace-panes.tsx`](https://github.com/THU-MAIC/OpenMAIC/blob/main/lib/workbench/workspace-panes.tsx). ### Which state management library does OpenMAIC employ? OpenMAIC utilizes **Zustand** for lightweight global state management, paired with **Immer** for immutable state updates. This combination avoids the boilerplate of Redux while maintaining predictable state mutations across the workbench session store (`useWorkspaceStore`). ### What technologies render mathematical expressions in OpenMAIC? Mathematical content renders through **KaTeX**, **temml**, and **mathml2omml** libraries. These tools convert LaTeX and MathML syntax into high-performance HTML/SVG output, essential for displaying machine learning formulas and algorithmic notation in the UI.