explaingit

arviahq/tidex

Analysis updated 2026-07-16 · repo last pushed 2026-06-17

2TypeScriptAudience · developerComplexity · 3/5ActiveSetup · moderate

TLDR

Tidex automatically builds an interactive explorer for React component libraries by scanning your source code and reading TypeScript types, no separate story files needed. It generates live previews, docs, design tokens, and accessibility, interaction, and visual testing for teams maintaining shared UI kits.

Mindmap

mindmap
  root((repo))
    What it does
      Scans component source
      Builds explorer automatically
      Live previews and docs
    Key features
      Live prop controls
      Design tokens
      Accessibility checks
      Visual regression tests
    Tech stack
      TypeScript
      React
      Playwright
    Use cases
      Browse shared UI kit
      Test in CI pipeline
      Design token management
    Audience
      Design system teams
      Frontend developers
      Monorepo maintainers
    Setup
      Single config file
      Scan and generate

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Browse and test your React component library without writing separate story files for each component.

USE CASE 2

Run automated accessibility, interaction, and visual regression tests in CI against your components.

USE CASE 3

Give designers and product managers a live gallery to tweak props and see results instantly.

USE CASE 4

Explore and manage design tokens alongside your component documentation in one place.

What is it built with?

TypeScriptReactPlaywright

How does it compare?

arviahq/tidexarashthr/hugo-flowargeneau12e/kairos-tx
Stars222
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-06-17
MaintenanceActive
Setup difficultymoderatemoderatehard
Complexity3/53/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires an existing React component library with TypeScript types, you point it at your components folder via a single config file and run a scan command.

In plain English

Tidex is a tool for teams who build React component libraries and want a visual workbench to browse, test, and document those components without the usual overhead. Instead of requiring developers to write a separate story file for every button, card, or modal, it scans your existing source code and automatically builds a full explorer with live controls, auto-generated docs, design tokens, and built-in accessibility, interaction, and visual testing. The way it works is straightforward in concept: you run a command that scans your components folder, reads the TypeScript types on each component, and generates everything needed to render an interactive preview. From those types it infers what props each component accepts, what variants exist, and how callbacks should wire up to state. The result is a manager UI with tabs for props, variants, docs, tests, visual regression, interactions, and design foundations, all driven by what your code already declares. You configure it through a single config file rather than managing multiple addon configurations. The primary audience is design system teams and frontend developers maintaining a shared component library, especially in monorepos. For example, a company with an internal UI kit used across multiple products could use this to give designers and product managers a live gallery where they can tweak props and see results, while engineers get automated accessibility checks, screenshot-based visual regression tests, and interaction tests that run in CI. It positions itself as a lighter-weight alternative to Storybook by eliminating the need to hand-write and maintain separate story files for every component. A few things stand out about how the project is built. Testing is powered by Playwright under the hood, and the scan output is persisted as JSON artifacts in a hidden folder, which keeps the generated material separate from source code. It also offers a plugin API for adding custom panels or hooking into the generation pipeline, and it works in monorepo setups. The project is quite new (two stars at time of writing), so it is early-stage and likely still evolving rapidly.

Copy-paste prompts

Prompt 1
Set up Tidex in my React component library monorepo, scan my components folder and generate an interactive explorer with a single config file
Prompt 2
Add a custom panel to my Tidex explorer using the plugin API to show component dependency graphs
Prompt 3
Configure Tidex to run Playwright visual regression and accessibility tests in my CI pipeline for every component variant
Prompt 4
Point Tidex at my TypeScript React components and auto-generate docs and prop controls from their type definitions
Prompt 5
Set up Tidex in a monorepo so it scans multiple packages and builds one unified component explorer

Frequently asked questions

What is tidex?

Tidex automatically builds an interactive explorer for React component libraries by scanning your source code and reading TypeScript types, no separate story files needed. It generates live previews, docs, design tokens, and accessibility, interaction, and visual testing for teams maintaining shared UI kits.

What language is tidex written in?

Mainly TypeScript. The stack also includes TypeScript, React, Playwright.

Is tidex actively maintained?

Active — commit in last 30 days (last push 2026-06-17).

How hard is tidex to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is tidex for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.