Skip to content

v2_web_client.md

Latest commit

 

History

History
61 lines (45 loc) · 2.55 KB

v2_web_client.md

File metadata and controls

61 lines (45 loc) · 2.55 KB

Inspector V2 Tech Stack

Brief | V1 Problems | V2 Scope | V2 Tech Stack | V2 UX

Web Client | Server | Storage

Overview

Language and Framework

  • Typescript
  • React

Components and Theme

Mantine Rationale

Mantine is recommended based on evaluation of both prototype implementations (v2/prototype/shadcn and v2/prototype/mantine) and group discussion.

Notes from Prototype Comparison:

Shadcn lacks layout components, requiring extensive Tailwind class management for containers, spacing, and alignment. This adds friction and cognitive load, based on our experiences with the current Inspector. Mantine's layout components (Flex, Stack, etc.) make the code more concise and easier to understand.

Although the code may be less directly customizable, we don't expect extensive theming or branding to be a priority for Inspector as a debugging tool.

See PR #980 discussion for example code comparison.

Requirement Mantine Shadcn
Layout components Yes - Flex, Stack, Group, Grid No - Use Tailwind divs
Out-of-box experience Yes - Comprehensive Partial - Assemble yourself
Code verbosity Concise JSX props Verbose Tailwind classes
Styling approach Props + theme config Tailwind utility classes
Documentation Extensive API docs Component examples

Benefits:

  1. Built-in Layout Components - Mantine provides layout primitives as JSX components:

    • Flex, Stack, Group, Grid, Center, Container
    • No need to manage div elements with Tailwind classes
    • More declarative, readable code

  2. Reduced Class Management - Compare the same UI element:

    // Mantine - concise
<Alert icon={<IconAlertTriangle />} color="yellow" title="Warning">
  {message}
</Alert>

// Shadcn + Tailwind - verbose class strings
<div className="flex items-start gap-3 rounded-lg border border-yellow-200
  bg-yellow-50 p-4 text-yellow-800 dark:border-yellow-900 dark:bg-yellow-950
  dark:text-yellow-200">
  <IconAlertTriangle className="h-5 w-5 flex-shrink-0" />
  <div className="flex-1"><p className="font-medium">Warning</p>{message}</div>
</div>

  3. Better Out-of-Box Experience:

    • Single install provides all components
    • Consistent API across all components