Открываете очередной React-проект в 2026 году и смотрите на белый экран package.json. Какой роутер? Vite или Next.js? shadcn/ui или Mantine? Zustand или всё-таки Redux Toolkit? React Hook Form или TanStack Form? И как вообще теперь делать таблицы — TanStack Table или AG Grid?

Каждая из этих категорий за последние 2-3 года прошла через смену лидера. То что было стандартом в 2022 (Redux, Material UI, Webpack, styled-components, Formik), в 2026 либо в legacy-режиме, либо проиграло свежим конкурентам. Те кто работают в одной экосистеме годами, могут не заметить как сместились веса в соседних слоях стека — пока не открывают новый проект и не сталкиваются с тем что “стандарт”, которым они пользовались, теперь редко выбирают.

Эта статья — карта актуального React-стека 2026 года, разбитая по 60+ категориям. По каждой — что выбрал бы я для нового проекта в 2026, какие есть альтернативы для специфических случаев, что считается legacy и почему. Плюс — типовые комбинации стека под разные виды проектов (SaaS dashboard, collaborative editor, real-time dashboard, streaming app, consumer landing).

Зачем это читать

• Быстро свериться, что текущий выбор библиотек в проекте актуален. Возможно вы используете Yup для валидации — он работает, но в 2026 индустрия перешла на Zod / Valibot. Это не значит что нужно срочно мигрировать. Это значит что про новые проекты подумать стоит.

• Получить ориентир в тех категориях, которые давно не трогали — canvas-рендереры (Konva vs Pixi vs Three.js), rich text editors (TipTap vs Lexical vs Slate), P2P / collaboration (Yjs vs Automerge vs Liveblocks).

• Увидеть типовые стеки целиком для разных классов приложений — какие комбинации работают вместе, а какие конфликтуют.

Scope и оговорки

Документ React-ориентированный. Next.js, shadcn/ui, Radix, react-hook-form — всё в контексте React. Но многие инструменты универсальны: TanStack suite работает в Vue / Svelte / Solid одной кодовой базой. Headless primitives (Radix → ark-ui / Melt UI). Build tools, testing, monitoring, real-time sync — фреймворк-агностичны. Где это важно, я отмечаю отдельно.

Это не tier-list и не “выбирайте только победителя”. В каждой категории есть второй и третий выбор для конкретных кейсов — внутри каждой секции я описываю когда альтернатива оправдана. Иногда runner-up — правильный выбор именно для вашей задачи.

Я не пытаюсь покрыть все мыслимые пакеты в категории — только те которые реально стоит рассматривать в 2026. Категории отсортированы по убывающей частоте использования: первые 30+ нужны почти каждому проекту, последние 25+ — для специфических задач (PDF generation, embedded code playgrounds, A/B testing, visual regression).

Дисклеймер. Это субъективный взгляд, основанный на трендах npm downloads, GitHub stars, активности commits, и опыте работы с React-проектами разных размеров за последние годы. Цифры по downloads — на момент конца апреля 2026. В вашем регионе или нише веса могут быть другими — например, Ant Design всё ещё доминирует в Китае, Mantine особенно популярен в Восточной Европе. Где это важно, я отмечаю.

Оглавление

• Зачем это читать

• Scope и оговорки

• Headless vs Styled философия

• Универсальное vs React-specific

• Framework / метафреймворк

• Build tools

• State management (client state)

• State management (server state)

• Styling / CSS

• UI component libraries

• Headless UI primitives

• Forms

• Validation

• Tables / data grids

• Data visualization

• Animation / motion

• 3D / WebGL / Canvas

• Icons

• Date / time

• Drag & drop

• Virtualization

• Rich text editors

• Code editors (in browser)

• Audio / Video

• Maps

• File upload

• Toast / notifications

• Modal / command menu

• Routing (non-Next.js проекты)

• Internationalization

• Realtime / collaboration

• Authentication

• Testing (unit / component)

• E2E testing

• Monitoring / analytics

• Accessibility tools

• Monorepo tools

• Backend-as-Service (BaaS)

• Edge runtime / Edge functions

• GraphQL clients

• Markdown / MDX rendering

• Search backends (frontend integration)

• Headless CMS

• Email templates / sending

• PDF generation / viewing

• Export / Print

• Image services / Media optimization

• Feature flags / Toggles

• A/B testing / Experimentation

• API mocking (MSW)

• Visual regression testing

• Keyboard shortcuts / Hotkeys

• tRPC (end-to-end type safety)

• Push notifications / Realtime services

• Date / Color / Time pickers

• Embedded code playgrounds

• Observability (продвинутый monitoring)

• Auth — расширенный список

• Testing — расширенный список

• Build tools — Bun update

• Типовые стеки 2026

• Как этим пользоваться

Headless vs Styled философия

В 2026 году фронтенд разделился на два лагеря, и этот выбор влияет на всё остальное. Прежде чем идти по категориям, важно понять разницу.

Styled библиотеки

Material UI, Ant Design, Chakra UI — берёте <Button variant="primary"> и получаете готовую кнопку с своим дизайном и поведением. Быстро стартуете, но когда клиент просит переделать дизайн под свой brand — боль: стили зашиты, темизация работает только до определённого уровня.

Headless библиотеки

TanStack Table, Radix UI, react-aria — дают вам state, логику, поведение, accessibility, но ноль стилей и ноль разметки. Вы сам пишете JSX и CSS. Пример: TanStack Table считает сортировку, фильтрацию, пагинацию, даёт массив rows и headers, но как рендерить <table>, <tr>, <td> — ваше дело. Можете сделать через div с grid layout, через ul, карточки — логика работает.

Гибрид — shadcn/ui

Отдельная модель: не npm-пакет, а copy-paste подход. Компоненты построены поверх Radix (headless a11y) + Tailwind (styling). Вы копируете их код в свой проект и владеете им. Не нравится стиль — меняете прямо в файле, не борешься с overrides библиотеки. Стал стандартом в 2024-2026.

Что победило в 2026

Headless выигрывает в новых проектах с собственным дизайн-системом. Styled остаётся для internal tools и админок где скорость важнее дизайна. shadcn/ui стал компромиссом и получил массовое распространение.

Универсальное vs React-specific

Документ написан с перспективы React-разработчика, но многие инструменты работают в любом фреймворке. Полезно понимать разницу — при переходе на Vue/Svelte/Solid половину стека не придётся менять.

Universal (работает везде)

Это инструменты которые не привязаны к React. Работают в Vue, Svelte, Solid, Angular, или vanilla JS с минимальными изменениями или через обёртки:

• Build tools — Vite, Turbopack, Rspack, webpack билдят что угодно

• Styling — Tailwind, CSS Modules, vanilla-extract работают везде

• Validation — Zod, Valibot, ArkType — pure JS

• Date — date-fns, Day.js, Luxon — pure JS

• Icons — Lucide, Heroicons, Phosphor — SVG, импортируются как angle

• 3D core — Three.js, Babylon.js, PixiJS (обёртка R3F — React only)

• Code editors — Monaco, CodeMirror 6

• Audio/Video core — Howler, Tone, Wavesurfer, hls.js, Shaka, Media Chrome (web components)

• Maps core — Leaflet, Mapbox GL, MapLibre, deck.gl (обёртки типа react-leaflet — React only)

• Real-time — Yjs, Automerge, Socket.io, Ably, PartyKit, Liveblocks

• Monitoring — Sentry, PostHog, Datadog работают с любым стеком

• E2E testing — Playwright, Cypress тестируют любое веб-приложение

• Unit testing core — Vitest, Jest работают везде (testing libraries разные)

• Auth services — Auth.js поддерживает 7+ фреймворков, Clerk имеет SDKs

• TanStack suite — Query, Table, Virtual, Form, Router работают в React / Vue / Solid / Svelte одним core

React-specific (нужны аналоги в других фреймворках)

• Метафреймворки — Next.js, Remix (React). В Vue — Nuxt, Svelte — SvelteKit

• UI kits — shadcn/ui, MUI, Mantine, Chakra, Ant Design (React). В Vue — Vuetify, Element Plus, Naive UI

• Headless primitives — Radix, react-aria (React). Аналоги: ark-ui, Melt UI (Svelte), Reka UI (Vue)

• Animation bindings — Motion работает везде, но ecosystem примеров — React

• Rich text — TipTap универсален (Vue/Svelte/vanilla), Lexical — React-only

• Forms — React Hook Form (React), TanStack Form (универсальный)

• Dataviz готовые — Recharts, visx, Nivo (React). D3, ECharts, Plot — универсальные

• Routing — React Router. В Vue — Vue Router, в Svelte — SvelteKit routing. TanStack Router имеет Solid версию.

• i18n bindings — react-i18next (React), i18next core универсален

• DnD — dnd-kit (React). Универсально — SortableJS

• Virtualization — TanStack Virtual универсален, react-window — React

Практический вывод

Если переезжаете с React на другой фреймворк (например в компании где Vue или Svelte) — build pipeline, testing, monitoring, data fetching pattern (TanStack Query → Vue Query), state management concepts — всё переносится. Меняется слой “как писать компоненты и UI”.

Framework / метафреймворк

React в 2013 году был только view library — вы сам собирал роутер, загрузку данных, SSR, бандлинг. Это давало свободу, но требовало собрать 10 библиотек и заставить их работать вместе. Через пару лет появились метафреймворки — готовые решения которые включают всё это из коробки.

Сначала был Next.js (2016) от Zeit (который стал Vercel) — дал SSR и file-based routing. Потом Gatsby (2015-2020) с фокусом на static sites. Потом Remix (2020) от авторов React Router с возвратом к web fundamentals (forms, loaders). К 2024 году Remix слился обратно с React Router. А Next.js дошёл до App Router + React Server Components — новая парадигма где часть компонентов рендерится на сервере.

Метафреймворк нужен потому что правильно настроить SSR, code splitting, image optimization, кэширование, prefetching — это месяцы работы. Проще взять готовое решение и сосредоточиться на бизнес-логике. В 2026 писать production React без фреймворка — странное решение, разве что у вас embedded виджет внутри чужой страницы. Категория: React framework

React сам по себе — библиотека рендера. Метафреймворк добавляет роутинг, SSR, code splitting, image optimization. В 2026 это почти всегда Next.js или Vite-based решение с собственным роутером.

🏆 Next.js — Default для production

Индустриальный стандарт. App Router + React Server Components + Turbopack. Vercel деплой нативен, но хостится везде. Пользуется ~70% React-команд для новых проектов. Минусы — opinionated архитектура, vendor lock-in в сторону Vercel, сложность отладки RSC.

🥈 TanStack Start — Новый, растёт

От создателей TanStack Query / Table / Router. Vite-based SSR фреймворк с полной type-safety. Ещё в early days (2025-2026 релиз), но быстро набирает популярность как альтернатива Next.js без Vercel-зависимости.

◽ Remix / React Router v7 — После мерджа

Remix слился с React Router в v7 (2024). Акцент на web fundamentals — form actions, loaders, progressive enhancement. Лучше Next.js для сайтов которые должны работать без JS.

◽ Astro — Content-heavy

Для контентных сайтов, блогов, документации. Islands architecture — JS только там где он нужен. Можно смешивать React + Vue + Svelte в одном проекте.

⚠️ Create React App — Deprecated

Официально deprecated в 2023, команда рекомендует Vite или framework. Если видите в legacy-проекте — планируй миграцию.

Build tools

Браузер понимает только JS (и недавно ESM-модули). Но вы хотите писать TypeScript, JSX, импортировать CSS/SVG, разбивать код на чанки, минифицировать production-сборку. Между вашим кодом и браузером нужен build tool — он делает всё это.

Первым был Grunt (2012), потом Gulp. Они были task runners — запускали последовательность тасков. Потом пришёл webpack (2014) — не просто runner, а bundler: брал все твои файлы, строил граф зависимостей, выдавал оптимизированный bundle. webpack доминировал 10 лет, но медленный на больших проектах (cold start 30+ секунд на больших кодовых базах).

Революция началась в 2020-2021: Evan You (автор Vue) запустил Vite — использовал native ES modules в dev-режиме (не нужно бандлить, браузер сам грузит модули по запросу) + esbuild (Go, быстрый) для prebundling + Rollup для production. Cold start упал до < 1 секунды. Потом пошли Rust-based альтернативы: Turbopack (Vercel) и Rspack (ByteDance). К 2026 webpack остался только в legacy.

Почему мы здесь: требования к DX выросли, размеры кодовых баз — тоже. Cold start 30 секунд в 2014 был терпимо, в 2024 — неприемлемо. Rust-based tools дают 10-100x speedup, и индустрия постепенно мигрирует. Категория: Bundler / build tool

Dev server, HMR, production build, code splitting. В 2023-2024 случилась революция — Rust-based tools вытеснили webpack. Сейчас выбор сузился до трёх.

🏆 Vite 8 (с Rolldown) — Default для новых проектов

В Vite 8 (2026) esbuild + Rollup заменили на Rolldown — Rust-based bundler от VoidZero (компания Evan You). Cold start < 1 секунды, HMR < 50ms. Крупнейший plugin ecosystem. Используется Nuxt, SvelteKit, Astro, Angular 17+, SolidStart как default.

🏆 Turbopack — Default в Next.js

Rust bundler от Vercel. Стабилен с Next.js 16 (2026). HMR быстрее Vite (~70ms vs ~130ms на больших проектах). Минус — только внутри Next.js, нет standalone CLI.

🥈 Rspack / Rsbuild — Для миграции с webpack

От ByteDance, 90-95% webpack-compatible. Идеален когда нужно ускорить большой webpack-проект без переписывания всего. Migration за часы вместо недель (Vite миграция — 1-4 недели).

⚠️ webpack — Legacy

86% dev-ов всё ещё используют, но только 14% любят. Для новых проектов — нет. Остаётся если есть Module Federation, микрофронтенды или кастомные loaders.

State management (client state)

Компоненты React хранят локальный state через useState. Но часто один state нужен в десяти компонентах разбросанных по дереву. Передавать через props — “prop drilling”, страшно неудобно. Нужен global state.

В 2015 Facebook представил Flux архитектуру — unidirectional data flow. Потом Dan Abramov написал Redux (2015) — реализация Flux, которая стала стандартом на 5+ лет. Store + actions + reducers + middleware. Мощно, но boilerplate-heavy: для добавления одного поля нужно поменять 4-5 файлов.

Reacto-community отреагировал разными упрощениями: MobX (2016) с observable-based подходом (меняете state — UI обновляется автоматически). Redux Toolkit (2019) — официальный Redux минус 80% boilerplate. Recoil от Meta (2020) — atomic state. Zustand (2019) от pmndrs — radikalno минимальный API.

Главный сдвиг 2022-2024: разделение client state (UI, settings) и server state (данные с API). Оказалось это разные проблемы. Для server state появились TanStack Query и SWR. Для client state победил Zustand — самый простой. Redux ушёл в enterprise где нужны strict patterns и devtools.

Почему мы здесь: индустрия научилась что меньше boilerplate = меньше ошибок. Но “одного победителя” нет — выбор зависит от размера команды, сложности доменной модели и природы данных. Redux Toolkit доминирует в enterprise (больше weekly downloads чем Zustand), Zustand растёт в startup/SaaS, MobX выигрывает для OOP-heavy realtime приложений с WebSocket потоками, Jotai для composable atoms. Большинство современных команд комбинируют: server state через TanStack Query

• что-то одно для client UI state. Категория: Client state

UI state, настройки, temporary data, auth. НЕ данные с API (это серверный state, отдельная категория). В 2026 стандарт — Zustand, Redux только в legacy/enterprise.

🏆 Zustand — Малые/средние проекты

~1KB, без Provider wrapper, hook-based API. Zero boilerplate. От pmndrs (та же команда что react-three-fiber). Активно растёт в популярности — частый выбор для новых проектов с командой 1-5 человек. Поддерживает devtools, persist, immer через middleware.

🥈 Jotai — Для atomic state

Тоже от pmndrs. Atomic model — state состоит из независимых atoms. Granular re-renders по умолчанию. Хорош для сложного derived state (computed atoms, async atoms). Заменил Recoil (от Meta, deprecated в 2024).

🏆 Redux Toolkit — Enterprise / большие команды

Официальный современный Redux. По npm downloads всё ещё больше Zustand (~10M+ weekly) — доминирует в существующих codebases и больших командах. Для команд 10+ devs где нужны strict patterns, time-travel debugging, audit changes, middleware pipeline. RTK Query как server state альтернатива встроена.

🏆 MobX — Realtime / OOP / сложная domain model

Observable-based, похож на Vue reactivity. Лучший выбор для приложений со сложной OOP-friendly доменной моделью (несколько связанных сущностей с собственным состоянием, computed fields и взаимосвязями), для real-time через WebSocket (где TanStack Query не подходит), для большого числа derived state с автокешированием. Granular re-renders из коробки без selectors. Хорошо подходит для real-time приложений с complex state.

◽ Signals (@preact/signals) — Самый быстрый

Fine-grained reactivity, прямые DOM updates. ~3ms render vs 12ms Zustand на бенчмарках. Но экосистема React не совсем подходит — signals противоречат immutable state модели React. Нативно работает в Solid.js, Preact.

State management (server state)

Серверный state отличается от клиентского тем что он не ваш — вы его не контролируете, он живёт на сервере и может устареть. Это порождает много специфических проблем: кэширование, invalidation (когда считать кэш устаревшим), refetching в фоне, оптимистичные обновления, pagination с бесконечной подгрузкой, synchronization между вкладками.

До 2018 года это обычно решали через Redux — хранили API data в store, вручную писали actions для загрузки, обработки ошибок, инвалидации. В одном приложении легко накапливалось 200+ action creators только для fetching. Фил Хоутон в 2018 написал SWR от Vercel — “stale-while-revalidate”, берёт название из HTTP header-а. Идея: возвращай cached data мгновенно + фетчи фоном свежие. Тanner Linsley в 2019 выпустил React Query (позже переименован в TanStack Query) — ещё больше возможностей.

К 2023 году стало consensus: server state ≠ client state. У них разный lifecycle, разные проблемы, разные решения. Redux для server state больше не используют в новых проектах. TanStack Query + Zustand — типовая комбинация.

Почему мы здесь: Redux пытался решить обе проблемы одним хаммером. Разделение ответственностей дало лучшие инструменты для каждой — TanStack Query не пытается быть global state для UI, он умеет только server state, но делает это отлично. Категория: Server state / data fetching

Данные с API: caching, refetching, invalidation, loading states. В 2023-2026 это стала отдельная дисциплина со своими инструментами, отдельно от client state.

🏆 TanStack Query — Стандарт

Бывший React Query. Cache, refetch в фоне, optimistic updates, pagination, infinite scroll, prefetching. ~5M скачиваний в неделю. Работает с любым fetching — fetch, axios, GraphQL, tRPC. Универсальный.

🥈 SWR — Легче, от Vercel

Проще TanStack Query, меньше API. Хорош для маленьких проектов. Но у TanStack Query больше возможностей, поэтому для серьёзных приложений чаще выбирают его.

◽ RTK Query — Если уже Redux

Часть Redux Toolkit. Если проект уже на Redux — логично использовать RTK Query вместо доп-зависимости. Но самостоятельно редко выбирают.

◽ Apollo Client / Relay / urql — GraphQL-специфично

Если бэкенд на GraphQL — Apollo самый популярный, Relay от Meta — для очень больших проектов с компиляцией запросов, urql — легче Apollo.

Styling / CSS

Классический CSS имеет две большие проблемы для компонентных приложений: глобальный namespace (класс .button действует везде) и dead code (невозможно знать какие классы удалить). Индустрия прошла через несколько волн решений.

Первая волна: методологии вроде BEM (2009) — дисциплина именования, решение проблемы namespace вручную через .block__element--modifier.

Вторая волна: CSS Modules (2015) — локальные по умолчанию классы, компилятор генерирует уникальные имена (.Button_button__x2f9). Решает namespace, но стили всё ещё в отдельном файле.

Третья волна: CSS-in-JS. styled-components (2016), Emotion (2017) — пишете стили прямо в JS компоненте. Динамические стили (меняющиеся от props) работают естественно. Но runtime overhead, большой bundle, проблемы с SSR.

Четвёртая волна: Utility CSS. Tailwind CSS (2017) от Adam Wathan — вместо написания своих классов используете готовые атомарные (flex, p-4, text-red-500). Сначала считалось ересью (“inline-стили!”), но к 2022 году Tailwind победил — за счёт combination скорости разработки, маленького bundle (purge неиспользуемых классов) и хорошей интеграции с компонентным мышлением.

Пятая волна: Zero-runtime CSS-in-JS. vanilla-extract, Panda CSS — пишете в TS, компилируется в статический CSS. Type-safe как CSS-in-JS, но без runtime overhead.

Почему мы здесь: React Server Components (2023+) убили runtime CSS-in-JS — styled-components не работает с RSC без хаков. Tailwind + CSS Modules отлично работают с RSC. Поэтому индустрия откатилась от styled-components обратно в статический CSS, но с удобствами — Tailwind или compile-time CSS-in-JS. Категория: Подход к CSS

Tailwind победил. CSS-in-JS почти умер (runtime overhead, bundle size, RSC несовместимость). CSS Modules остаются для тех кто не любит utility классы.

🏆 Tailwind CSS v4 — Default

Tailwind v4 (конец 2024) с Oxide engine. Zero config, CSS-first конфигурация через @theme, в 3-10 раз быстрее v3. Интегрируется с любым framework. Используется в shadcn/ui, Vercel-шаблонах.

🥈 CSS Modules — Classic

Встроен в Next.js, Vite. Без runtime overhead, работает с RSC. Для тех кто не хочет Tailwind. Часто комбинируется с BEM или similar methodology.

◽ Panda CSS / vanilla-extract — Type-safe CSS-in-JS

Compile-time CSS-in-JS — пишете в JS/TS, компилируется в статичный CSS. Zero runtime. vanilla-extract от Mark Dalgleish, Panda от Chakra-команды. Альтернатива Tailwind для тех кто не любит классы в разметке.

⚠️ styled-components / Emotion — В упадке

Runtime CSS-in-JS. Не совместим с RSC без хаков. styled-components перестал активно развиваться (команда распалась). Для новых проектов — нет.

UI component libraries

UI component library — готовый набор кнопок, форм, модалок, таблиц, dropdown-ов с единым стилем и поведением. Альтернатива — писать всё с нуля или использовать headless primitives. Component library даёт максимальную скорость разработки ценой гибкости дизайна.

Начало — Bootstrap (2011) от Twitter. Ещё до React эпохи, но заложил модель “готовые компоненты с единым стилем”. Потом React-era: Material UI (2014, сейчас MUI) по Google Material Design — индустриальный стандарт для админок на многие годы. Ant Design (2015) от Alibaba — стандарт в азиатских enterprise продуктах.

В 2019-2022 появились более современные: Chakra UI (2019) с focus на DX, Mantine (2021) с огромным component set. Все они styled — дают готовый дизайн, который потом сложно переделывать.

Перелом случился в 2023 — shadcn/ui. Не библиотека, а коллекция copy-paste компонентов на Radix + Tailwind. Вы копируете код в свой проект и редактируете как хотите. Решило главную проблему styled-библиотек — “не устраивает дизайн, но не можете изменить”. Стал стандартом за полтора года.

Почему мы здесь: раньше был выбор “свой дизайн + много работы” или “чужой дизайн + быстро”. shadcn/ui дал третий путь — “свой дизайн + быстро”, потому что стартовая точка это Radix (headless) + Tailwind (стилизация через классы). Категория: Готовые styled компоненты

Когда нужно быстро собрать приложение и design system не приоритет. Или когда делаете internal tool / admin panel.

🏆 shadcn/ui — Default 2026

Не npm-пакет, а coll copy-paste компоненты на Radix + Tailwind. Вы копируете код в свой проект. Не устраивает дизайн — меняете напрямую. Стал стандартом в 2024-2026 для новых React приложений.

🥈 MUI (Material UI) — Enterprise / classic

Google Material Design из коробки. Огромный component set, зрелый, стабильный. Минусы — большой bundle, Material-стиль сложно перекрасить под свой brand без переписывания. Хорош для enterprise admin UI.

🥈 Mantine — Сбалансированный

120+ компонентов, хорошая типизация, встроенные hooks, form library. Дизайн нейтральнее Material UI, легче адаптировать. Популярен в SaaS dashboard-ах.

🥈 Ant Design — Enterprise dashboards

От Alibaba. Plenty of компонентов для сложных форм, таблиц, дашбордов. Очень популярен в Китае, сильно used в B2B SaaS. Стиль специфичный — “enterprise gray”, не для consumer продуктов.

◽ Chakra UI v3 — Восстановление

Chakra сильно упал после v2 (команда ушла делать Panda CSS), но v3 вышел в 2024 переписанным на ark-ui (headless от той же команды). Decent вариант если хочется simple theming.

◽ HeroUI (бывший NextUI) — Красивый default

Beautiful defaults из коробки, dark mode нативно. Построен на react-aria. Хорош для consumer products где дизайн важен, а на свой дизайн-систему времени нет.

Headless UI primitives

Сделать правильный <Select> или <Dialog> — это дни работы. Не JSX, а: keyboard navigation (Tab, Arrow keys, Esc, Enter), focus trap внутри модалки, ARIA атрибуты, работа со screen readers, правильное позиционирование popover-ов с учётом краёв экрана, portal rendering. Большинство команд делают это плохо — и получают недоступные для пользователей с инвалидностью продукты.

Решение — headless primitives. Библиотека даёт всю сложную логику (a11y, keyboard, focus), вы даёте стиль. Это компромисс между “готовые styled компоненты” (быстро но чужой дизайн) и “пишите с нуля” (свой дизайн но долго и с багами).

Первым был Reach UI (2019) от Ryan Florence — но его бросили. Потом пришёл Radix UI Primitives (2020) от WorkOS (тогда Modulz) — стал стандартом. Composable API через <Dialog.Root><Dialog.Trigger><Dialog.Content>. Параллельно Adobe выпускала react-aria (2020) — самую глубокую реализацию a11y patterns из своей design team.

shadcn/ui построен на Radix — скопировал Radix-подход в массы. Сейчас 80%+ новых React приложений используют Radix через shadcn либо напрямую. Headless Tailwind (конкурент Radix) заглох.

Почему мы здесь: accessibility стала формальным требованием (ADA суды в США, European Accessibility Act 2025). Самостоятельно сделать доступный dropdown — реально сложно. Headless primitives стали способом делать доступные продукты по умолчанию. Категория: Behavior-only компоненты

Dialog, Popover, Select, Dropdown, Menu с правильной a11y и keyboard navigation. Без стилей — стили пишете сам или через Tailwind.

🏆 Radix UI Primitives — Стандарт

От WorkOS (бывший Modulz). Dialogs, popovers, dropdowns, tooltips, selects — всё с правильной a11y, keyboard navigation, focus management. Основа shadcn/ui. Composable API с <Root><Trigger><Content> pattern.

🥈 react-aria / react-aria-components — Adobe, самый a11y

От Adobe. Самая глубокая a11y — включая screen readers, mobile touch interactions. react-aria-components (2024) — компонентная версия, проще чем голые hooks. Основа Chakra v3 (через ark-ui) и HeroUI.

◽ ark-ui — Framework-agnostic

От команды Chakra. Работает в React / Vue / Solid одним API. Построен на Zag.js (state machines для UI). Используется в Chakra v3.

⚠️ Headless UI (от Tailwind) — Уходит

Изначально был популярен вместе с Tailwind, но не развивается активно. Radix съел нишу. Если видите в старом проекте — рабочее, но новые компоненты на Radix.

Forms

Формы — это мучение React-а. Управлять state каждого поля, валидацией, ошибками, submit, reset, dirty-состоянием — если делать “в лоб” через useState, простая форма на 10 полей превращается в 200 строк с багами.

Изначально Redux-сообщество решало через redux-form (2015) — держать form state в Redux store. Монструозно медленно (каждая буква вызывает action), все бросили.

Потом Formik (2018) от Jared Palmer — локальный form state в контексте. Стало легче. Но всё ещё controlled components, каждое нажатие клавиши — re-render всей формы. На формах с 20+ полями лагало.

Перелом — React Hook Form (2019) от Bluebill. Idea: использовать uncontrolled inputs и refs. DOM сам хранит значения, React не перерендеривается при печатании. Одна из самых быстрых форм-библиотек. Стал стандартом.

В 2024 появился TanStack Form с полной type-safety — каждое поле типизировано, нельзя опечататься в имени поля или присвоить строку в number. Набирает популярность в TS-heavy проектах.

Почему мы здесь: React производительность сильно страдает от частых re-renders, а формы — худший случай. RHF решил эту проблему радикально через uncontrolled подход. TanStack Form решает вторую проблему — типобезопасность. Категория: Управление формами

Валидация, field state, submit handling, error display. React hooks или custom rendering.

🏆 React Hook Form — Default

Стандарт с 2020. Minimal re-renders (uncontrolled inputs по умолчанию). Интеграция с любым UI kit и любой валидатор (Zod, Yup, Valibot). ~7M скачиваний в неделю.

🥈 TanStack Form — Type-safety first

Новый (2024). Type-safe end-to-end без compromise. Ключевая фича — field-level subscriptions, granular re-renders. Растёт в популярности у TypeScript-heavy команд.

⚠️ Formik — В упадке

Стандарт до 2020, но активно не развивается. Много re-renders, менее эргономичен чем RHF. Для новых проектов — нет.

Validation

TypeScript проверяет типы в compile time, но в runtime у вас JSON из API, form data, LocalStorage — которым вы не доверяете. Валидация — гарантия что данные соответствуют ожиданиям в runtime.

Традиционный подход — JSON Schema + ajv. Работает, но вы пишете схему отдельно от типов, и они могут разойтись. Двойная работа.

В 2017-2020 популярным был Yup — chainable API для схем. Но TypeScript support был слабый, типы приходилось писать вручную.

В 2020 Colin McDonnell выпустил Zod — “TypeScript-first schema validation”. Главная фишка — типы выводятся автоматически через z.infer<typeof schema>. Больше не нужно дублирование. За 2-3 года Zod стал стандартом, интегрирован с RHF, tRPC, OpenAPI генераторами.

После успеха Zod появились альтернативы с другими компромиссами: Valibot — tree-shakeable (bundle меньше в 10x), ArkType — схемы как TS-синтаксис в строках, Effect Schema — для функционального стиля.

Почему мы здесь: TypeScript community хочет минимизировать дублирование code-schema-types. Zod решил это элегантно — одна схема даёт и типы, и runtime валидацию. Категория: Schema validation

Runtime проверка данных с выводом типов. Для форм, API responses, env переменных.

🏆 Zod — Default

Стандарт. Schema first, types выводятся через z.infer. Экосистема огромная — интеграция с RHF, tRPC, всеми ORM. v4 в 2025 — улучшенная производительность.

🥈 Valibot — Мини-Zod

Tree-shakeable альтернатива Zod. Bundle size в 10+ раз меньше для типичных схем. API похож на Zod. Хорош для фронтенда где bundle size критичен.

🥈 ArkType — TypeScript-native

Схемы пишутся как TS-строки ('string | number'), парсятся в runtime. Быстрее Zod в runtime, но менее читаемо. Интересный эксперимент.

⚠️ Yup — Legacy

Был стандартом до Zod. TypeScript support слабее — типы не выводятся автоматически. Для новых проектов — нет.

Tables / data grids

Data table выглядит просто — сетка строк и столбцов. Но как только добавляете sorting, filtering, pagination, row selection, expandable rows, column resizing, virtualization для 10000+ строк — это десятки тысяч строк сложной логики.

Исторически каждая UI-library имела свою таблицу (MUI DataGrid, Ant Table, Mantine Table) — styled, ограниченно гибкие. Отдельно был AG Grid (2016) — enterprise-grade data grid со всеми функциями Excel. Очень мощный, но коммерческий ($1000+/год) и styled под свой дизайн.

В 2019 Tanner Linsley запустил React Table — первый headless data table. Только state и логика, JSX пишете сам. В v7 был hook-based, в v8 (2022) переписан в framework-agnostic TanStack Table — тот же core работает в React, Vue, Solid, Svelte.

Почему мы здесь: дизайн-системы компаний никогда не совпадают со стилем styled tables. Заставить MUI DataGrid выглядеть как ваш дизайн часто невозможно. Headless подход — только данные и логика, дизайн свой. Стандарт для современных продуктов. Категория: Таблицы данных

Sorting, filtering, pagination, grouping, virtualization для больших наборов. Headless (вы стилизуете) vs готовые enterprise решения.

🏆 TanStack Table — Headless default

Бывший React Table. 100% headless — даёт state и логику, JSX пишете сам. Sorting, filtering, pagination, row selection, expanding, grouping, column pinning. Интеграция с TanStack Virtual для больших данных.

🥈 AG Grid — Enterprise

Самый мощный data grid. Excel-like experience, pivoting, master-detail, Excel export, rich filtering. Community free, Enterprise $1K+/год. Для data-heavy B2B.

🥈 MUI DataGrid — Если уже MUI

Если проект на MUI — логично брать DataGrid. Community free, Pro/Premium платные. Хорош для внутренних админок.

Data visualization

Data visualization в вебе имеет длинную историю. В 2011 Mike Bostock выпустил D3.js (Data-Driven Documents) — низкоуровневая библиотека которая связывает DOM с данными. Она революционизировала визуализацию, Bloomberg, NYT, FiveThirtyEight сделали на ней знаменитые интерактивные статьи. Но D3 — императивный, прямо манипулирует DOM, плохо дружит с React reconciler.

React-сообщество решало это двумя путями:

Высокоуровневые готовые графики: Recharts (2015) — самый популярный, простой API (<LineChart><Line /></LineChart>). Nivo — красивые defaults. Apache ECharts — мощный Canvas/WebGL для больших данных. Хорошо для типовых dashboard-ов.

Низкоуровневые primitives: visx (2017) от Airbnb — D3 расклеен на маленькие React компоненты (Scale, Axis, Shape). Собираете свой кастомный chart из блоков. Когда Recharts недостаточно — переходите на visx. Хорошо подходит для real-time data apps.

Отдельно — Observable Plot (2022) от самого Mike Bostock для exploratory analysis, и Plotly.js для научных/финансовых графиков.

Почему мы здесь: нет “одной лучшей” библиотеки для dataviz потому что задачи слишком разные. Для dashboard KPI нужен простой API (Recharts). Для кастомного timeline viewer — primitives (visx). Для очень больших данных — Canvas (ECharts). Для исследования — декларативное API (Plot). Категория: Графики и визуализация

От простых bar charts до сложных D3-виджетов. Headless vs готовые компоненты снова.

🏆 Recharts — Default для простых кейсов

Готовые React-компоненты для типовых графиков: Line, Bar, Area, Pie, Scatter. Построен поверх D3. Самая большая популярность для dashboard-ов. Простой API.

🏆 visx — Для кастома

От Airbnb. Low-level primitives из D3 в React-форме. Когда Recharts недостаточно — переходите на visx и собираете свой кастомный chart.

🥈 D3.js — Самый мощный

Базовая библиотека под всеми остальными. Императивный DOM manipulation — плохо сочетается с React. Но через d3-scale, d3-shape и подобные модули — используется часто через visx или Recharts.

🥈 Apache ECharts — Китайский enterprise

Невероятно мощный — 3D графики, maps, огромные данные через Canvas/WebGL. Популярен в Asia enterprise. Минус — большой bundle и неспецифичный для React API.

◽ Nivo — Beautiful defaults

Красивые графики из коробки. Построен поверх D3. Больше настроек чем Recharts, но менее гибкий чем visx.

◽ Observable Plot — Научные визуализации

От Mike Bostock (автор D3). Декларативный API, хорош для exploratory analysis и научных графиков. Меньше для dashboards, больше для notebooks / reports.

◽ Plotly.js — Scientific / financial

Специализация — scientific и financial charts. 3D поверхности, candlesticks, scientific plots. Тяжеловат для обычных dashboards.

◽ Chart.js — Non-React мир

Canvas-based, легче SVG-решений для больших данных. Vanilla JS, есть обёртка react-chartjs-2. В React-мире чаще выбирают Recharts.

Animation / motion

Анимации в вебе имеют три поколения. Первое — jQuery animate (2006) и Flash. Примитивные ease functions, DOM-based, медленно.

Второе — CSS transitions и animations (2011+). GPU-accelerated, быстро. Но декларативные — сложно управлять в runtime, нельзя orchestrate, сложно интегрировать с React state.

Третье поколение — React-native анимации. React Spring (2018) от Paul Henschel — physics-based, “natural feel” через spring physics вместо фиксированных длительностей. Framer Motion (2019) — самый популярный, declarative API: animate={{x: 100}}. Gesture support, layout animations (FLIP под капотом), AnimatePresence для enter/exit.

В 2024 Framer Motion переименовали в Motion и сделали framework-agnostic (React, Vue, vanilla). Параллельно GSAP (GreenSock) — legend of web animation, начинал с Flash эпохи, до сих пор лучший для timeline-based сложных анимаций (scroll-triggered, morphing SVG). В 2024 GSAP стал бесплатным для всех (раньше Business требовал лицензию).

Отдельная категория — Lottie (2017) от Airbnb. Дизайнер делает анимацию в After Effects, экспортирует JSON, играется в вебе без переписывания кода. Революция для сложных brand-анимаций.

Почему мы здесь: анимации стали частью brand-идентичности продуктов. Stripe, Linear, Vercel, Apple — все активно используют motion как способ выделиться. Motion + GSAP покрывают 95% случаев. Категория: Анимации

Переходы, gestures, layout animations, scroll-driven анимации, сложные timeline-based.

🏆 Motion (ex-Framer Motion) — Default для React

В 2024 переименован из Framer Motion → Motion, стал framework-agnostic (React, Vue, vanilla). Declarative API, gestures из коробки, AnimatePresence для entry/exit, LayoutAnimation. Используется в 80% React-приложений где нужны анимации.

🏆 GSAP — Для сложного

Стандарт для сложных timeline-based анимаций, scroll-triggered эффектов, SVG morph. С 2024 года бесплатен для всех (раньше Business требовала лицензию). Не React-native но работает с ref. Для landing pages с wow-эффектами — незаменим.

🥈 Auto-Animate — Самый простой

От FormKit. Оборачиваете контейнер в один хук — дети получают smooth transitions при add/remove/reorder. Zero config. Для простых случаев где Motion overkill.

◽ React Spring — Physics-based

Spring physics вместо фиксированных длительностей. Даёт “natural” feel анимациям. От pmndrs. Меньше популярен с ростом Motion, но в gaming/interactive UI — хороший выбор.

◽ Lottie — After Effects → web

Экспортируете анимацию из Adobe After Effects, играете в вебе. Когда дизайнер уже сделал сложную анимацию — Lottie даёт её без переписывания кода.

3D / WebGL / Canvas

WebGL появился в 2011 как browser API для GPU-ускоренной 3D графики. Но сырой WebGL — это кошмар: шейдеры на GLSL, буферы вершин, матрицы трансформаций. Для 99% разработчиков это слишком низкий уровень.

В 2010 Ricardo Cabello (Mr.doob) начал Three.js — high-level обёртку. За 15 лет стал де-факто стандартом: Scene, Camera, Mesh, Material, Geometry — знакомая абстракция из game dev. Google Earth, все 3D на landing page сайтов, museums — всё на Three.js.

Но Three.js императивный — создаёте объекты, добавляете в scene, обновляете каждый кадр в render loop. С React state это плохо дружит. В 2018 Paul Henschel (того же pmndrs) создал react-three-fiber (R3F) — React reconciler для Three.js. Теперь пишете 3D сцену как JSX: <mesh><boxGeometry /><meshStandardMaterial /></mesh>. R3F + экосистема pmndrs (drei для хелперов, rapier для физики, postprocessing для эффектов) стали стандартом в React-мире.

Параллельно Microsoft развивает Babylon.js — сильнее в играх, WebXR (VR/AR), физике. Для 2D WebGL есть PixiJS — игры, particles, interactive graphics. Для сложных 2D canvas UI (whiteboards, editors) — Konva.

Почему мы здесь: consumer-продукты требуют всё более впечатляющих визуальных эффектов. Vercel, Linear, Apple landing pages — все используют 3D / WebGL. R3F сделал это доступным React-разработчикам без изучения низкоуровневых WebGL API. Категория: 3D, Canvas, WebGL

От простых canvas-примитивов до полноценных 3D-сцен.

🏆 Three.js — Стандарт 3D

Де-факто стандарт для 3D в вебе с 2010. Огромная экосистема, тонны туториалов, примеры. Императивный API.

🏆 React Three Fiber (R3F) — Three.js в React

Декларативная обёртка Three.js для React. Пишете 3D сцену как JSX. От pmndrs. Плюс экосистема — drei (helpers), rapier (physics), postprocessing. Производительнее vanilla Three.js в некоторых случаях благодаря React reconciler.

🥈 Babylon.js — Games / WebXR

От Microsoft. Альтернатива Three.js. Сильнее в играх, physics, WebXR (VR/AR). Менее популярен в React-мире но для GameDev — отличный выбор.

◽ PixiJS — 2D WebGL

2D games, interactive graphics, particle effects. Использует WebGL для ускорения но API как у Canvas 2D. Для 2D игр в вебе — первый выбор.

◽ Konva / react-konva — Canvas + interactivity

High-level API над Canvas 2D. Drag, transform, events. Для редакторов, whiteboard, diagram tools. Проще PixiJS, но менее производительный для игр.

Icons

Иконки в вебе прошли три этапа. Сначала — icon fonts (Font Awesome, 2012). Каждая иконка — символ в шрифте, рендерится через CSS. Проблемы: не tree-shakeable (весь шрифт грузится), плохое качество рендера, проблемы с a11y (screen reader читает символ).

Потом — SVG sprites. Все иконки в одном SVG файле, используете через <use>. Лучше качество, но всё ещё всё или ничего.

Эра React — иконки как React компоненты. Каждая иконка — свой компонент <ChevronDown />. Tree-shakeable: bundle содержит только те что вы реально используете. Props (size, color, strokeWidth) управляются через JSX. Это стандарт с 2019+.

Доминанты: Lucide (fork Feather Icons, open source, 1500+ иконок) — default в shadcn/ui. Heroicons от Tailwind team — 300 иконок но идеально подходят Tailwind-дизайну. Phosphor Icons — 9000+ иконок в 6 стилях. Tabler Icons — 5000+ в одном стиле.

Почему мы здесь: icon fonts ушли после того как tree-shaking стал mandatory требованием (каждые 10КБ bundle стоят денег на мобиле). React components + SVG — правильный tradeoff для современного веба. Категория: Иконки

SVG, tree-shakeable, единый стиль. Все современные используют только SVG через React-компоненты.

🏆 Lucide — Default

Fork Feather Icons. Open source, 1500+ иконок, активная разработка. Используется в shadcn/ui по умолчанию. Tree-shakeable — bundle содержит только использованные иконки.

🥈 Heroicons — От Tailwind

300 иконок от Tailwind Labs. Два стиля — outline и solid. Меньше выбор чем Lucide но идеально подходит к Tailwind-дизайну.

🥈 Phosphor Icons — 9000+ в 6 стилях

6 стилей: thin, light, regular, bold, fill, duotone. Самый богатый выбор когда нужны редкие иконки. Удобный веб-сайт для поиска.

◽ Radix Icons / Tabler Icons — Альтернативы

Radix Icons — минималистичные (~300). Tabler — 5000+ иконок в одном стиле. Оба хорошие, выбор дело вкуса.

Date / time

JavaScript встроенный Date объект — один из худших API в языке. Mutable (“меняете дату в переменной — меняется везде”), нет timezones, странное поведение месяцев (нумерация с 0), парсинг дат разный в браузерах.

Индустрия долго жила с Moment.js (2011) — chainable API, решал большинство проблем. Но к 2020 стало ясно: Moment огромный (~230KB), mutable, не tree-shakeable. В 2020 maintainers официально deprecated Moment и рекомендовали альтернативы.

Две основные замены: date-fns (2014) — functional, каждая функция отдельный импорт, tree-shakeable. Day.js (2018) — chainable API похожий на Moment, в 30 раз меньше. Для миграции с Moment — Day.js. Для новых проектов — date-fns.

Для timezone-heavy кода есть Luxon (от самого автора Moment) с первоклассной поддержкой IANA timezones.

Но главное — будущее принадлежит Temporal. Это native Web API, TC39 Stage 3 proposal, в Firefox с 2025, в Chrome за флагом. Решает все проблемы Date: immutable, timezone-aware, отдельные типы для PlainDate / PlainTime / ZonedDateTime / Instant / Duration. Когда это будет везде — все сторонние библиотеки станут ненужны.

Почему мы здесь: 15 лет индустрия боролась с плохим нативным API. Сообщество наконец смогло влиять на TC39 через Temporal. До его появления везде — date-fns оптимальный компромисс. Категория: Работа с датами

Форматирование, parsing, математика дат, timezones.

🏆 date-fns — Default

Functional, tree-shakeable. Импортируете только нужные функции — bundle маленький. Immutable даты. Большинство проектов используют его.

🥈 Day.js — Moment-compatible

Если мигрируете с moment.js — Day.js почти API-compatible и в 30 раз меньше. Chainable API (Moment-style).

◽ Luxon — Timezones

От создателя Moment. Первоклассная поддержка timezones и locale. Если приложение международное и часовые пояса критичны — Luxon сильнее date-fns.

◽ Temporal (native) — Будущее

Нативный Web API, Stage 3 proposal, частично в браузерах (Firefox 2025, Chrome behind flag). Когда будет везде — заменит все сторонние библиотеки. Пока — polyfills.

⚠️ Moment.js — Deprecated

Официально deprecated maintainers-ами в 2020. Mutability, большой bundle, нет tree-shaking. Переходить на date-fns или Day.js.

Drag & drop

Native HTML5 Drag and Drop API (2011) — печально известный как “worst web API”. События называются непоследовательно, не работает на touch devices, стилизация drag image почти невозможна, между elements сложно передавать сложные данные. Никто не использует напрямую.

Первая popular обёртка — react-dnd (2015) от Dan Abramov. Использовала HTML5 DnD API под капотом + предоставляла React-friendly API с hooks и HOCs. Работала, но mobile support был плохой (нужен был отдельный touch backend).

Параллельно был react-beautiful-dnd (2017) от Atlassian — лучший DX для списков и sortable. Но Atlassian официально прекратил его поддержку в 2024.

Новый стандарт — dnd-kit (2021) от Claudéric Demers. Не использует HTML5 DnD API вообще — вместо него собственная реализация через pointer events, работает на mobile из коробки. Лучшая a11y (keyboard navigation, screen readers). Hooks-based API. За 3 года стал де-факто стандартом.

Почему мы здесь: HTML5 DnD API безнадежен, mobile-first эра требует touch support, a11y стала обязательной. dnd-kit решил все три проблемы. Категория: Drag and drop

🏆 dnd-kit — Default

Современный стандарт. Лучшая a11y (keyboard navigation, screen readers), touch support, sortable lists, multi-container drag. Заменил react-dnd как выбор по умолчанию.

⚠️ react-dnd — Legacy

Старый стандарт. Работает через HTML5 Drag and Drop API — ограничен на mobile. Для нового проекта — dnd-kit лучше.

Virtualization

Если в DOM вставить 10000 элементов — браузер умрёт. Рендер медленный, layout долгий, память взрывается, scroll лагает. Но реально пользователь видит только 20-30 элементов на экране в каждый момент.

Решение — virtualization (или windowing). Рендерим только видимые элементы + буфер сверху и снизу. Когда пользователь скроллит — добавляем новые элементы вниз, удаляем сверху. В DOM всегда 30-50 элементов, независимо от размера данных.

Первым был react-virtualized (2016) от Brian Vaughn (React Core team). Мощный, но большой bundle и сложный API. В 2018 он переписал его как react-window — легче, проще.

В 2021 Tanner Linsley начал TanStack Virtual — framework-agnostic headless virtualization. Работает с React, Vue, Solid. Поддерживает vertical, horizontal, grid, variable-size items. Простой hooks-based API.

Brian Vaughn перестал активно поддерживать react-window (он в React Core team фокусировался на других задачах), и TanStack Virtual принял эстафету. Сейчас стандарт.

Почему мы здесь: данных становится больше — dashboards, CRM с миллионами contacts, chat history на годы назад. Virtualization — не опция, а необходимость. Категория: Виртуализация больших списков

Рендерить только видимые items — критично для списков 1000+ элементов.

🏆 TanStack Virtual — Default

Headless, framework-agnostic. Даёт логику — вы сам рендерите divs. Поддерживает vertical, horizontal, grid, variable-size items. Заменил react-window как стандарт.

⚠️ react-window / react-virtualized — Legacy

Автор Brian Vaughn (React Core team). react-virtualized был первым, react-window — легче его версия. Оба не активно развиваются. TanStack Virtual перенял эстафету.

Rich text editors

Rich text editor в браузере — одна из самых сложных задач в frontend. Нужно работать с contenteditable (браузерный API для редактируемых элементов) который ведёт себя по-разному в разных браузерах, handle selection, clipboard, undo/redo, вложенные structure (списки в таблицах в blockquotes).

Первые попытки — TinyMCE (2004), CKEditor (2003). Работали, но тяжёлые, неинтегрированные с React. В 2016 Facebook открыл Draft.js — первый serious React rich editor. Использовался в Facebook комментариях, Instagram captions. Но API был громоздким, extend — сложно. Meta прекратил поддержку в 2022.

Параллельно развивался ProseMirror (2016) от Marijn Haverbeke (автор CodeMirror). Не готовый редактор, а toolkit: schema-based документ, transform operations, plugin architecture. Очень мощный, но сложный learning curve.

Перелом — TipTap (2018) от überdosis team. Обёртка над ProseMirror которая делает его доступным. Extension-based архитектура (bold, italic, link, table — каждый extension), headless (нет стилей, JSX пишете сам). Стал стандартом к 2022.

В 2021 Meta выпустил Lexical — замену Draft.js. Используется в Facebook, Instagram, WhatsApp web. API проще Draft.js, но всё ещё сложнее TipTap.

В 2023 появился BlockNote — поверх TipTap, но даёт Notion-like block editor из коробки без настройки.

Почему мы здесь: Notion популяризировал block-based editors, которые стали стандартом UX. TipTap + ProseMirror дают гибкость построить что угодно — от простого commenting до полного Notion clone. Категория: WYSIWYG / rich text

Редакторы с форматированием, таблицами, изображениями, collaborative editing.

🏆 TipTap — Default для React

Headless обёртка ProseMirror. Extensible через extensions (bold, italic, tables, mentions, images, collaborative через Yjs). Используется в Notion-подобных продуктах. Document schema contracts, sane defaults.

🥈 Lexical — От Meta

Новый редактор от Facebook/Meta (заменил Draft.js). Используется в Facebook comments, Instagram captions. Фокус на performance и a11y. API сложнее TipTap.

🥈 BlockNote — Notion-style

Построен на TipTap, но предоставляет Notion-like block editor из коробки. Меньше возни с конфигурацией если нужен именно block-based editor.

◽ Slate — Максимальная гибкость

Plugin-архитектура без готового решения. Вы строите редактор из блоков как хотите. Учебная кривая круче всех остальных. Для уникальных UX (Notion, Dropbox Paper) — хороший выбор.

⚠️ Quill — Legacy

Классический WYSIWYG. Не React-specific, простой API. Для новых проектов — TipTap универсально сильнее.

Code editors (in browser)

Code editor в браузере нужен для online IDE (StackBlitz, CodeSandbox), playgrounds документаций (React docs), live demos, admin tools где редактируется код/JSON/SQL.

До 2015 был CodeMirror (2007) от Marijn Haverbeke — лучший open source web editor. Использовался везде: JSFiddle, Chrome DevTools, Firebase консоль. Simple API, mobile работал.

В 2016 Microsoft открыл Monaco Editor — ядро VSCode. Принёс в веб всё то что люди любят в VSCode: Language Server Protocol (LSP) для полноценного IntelliSense, multi-cursor, find-replace с regex, syntax highlighting для 100+ языков. Цена — огромный bundle (~2MB). Стал стандартом для serious online IDE.

В 2022 вышел CodeMirror 6 — полное переписывание с нуля. Модульный (вы выбираете только нужные features), mobile-friendly, легче Monaco. Хорош когда нужен simple editor а не полный VSCode.

Почему мы здесь: web-based coding стал mainstream — StackBlitz, Replit, GitHub Codespaces. Monaco стал де-факто стандартом для serious use case, CodeMirror 6 — для lightweight embedded cases. Категория: Редактор кода в вебе

Для online IDE, playgrounds, admin tools где нужно редактировать код.

🏆 Monaco Editor — VSCode-grade

Ядро VSCode в браузере. LSP, IntelliSense, multi-cursor, syntax highlighting для 100+ языков. Большой bundle (~2MB) но это цена за VSCode experience. Используется в Stackblitz, CodeSandbox, GitHub.dev.

🥈 CodeMirror 6 — Лёгкий, mobile

Модульный, легче Monaco. Работает на mobile. API новее (v6 — полное переписывание с нуля). Хорош когда не нужен полный VSCode — например embedded editor в dashboard.

◽ Shiki / highlight.js — Только подсветка

Не редакторы, а синтаксическая подсветка. Shiki — использует TextMate грамматики из VSCode (идеальная подсветка). highlight.js — легче, старше (используется в нашей книге).

Audio / Video

Браузер умеет играть видео через native <video> тег (HTML5, 2010). Для простого воспроизведения MP4 больше ничего не нужно. Но реальные продукты требуют больше: HLS streaming (Netflix-style адаптивный битрейт), кастомный UI (Netflix/YouTube не используют native controls), DRM для копирайта, анализ аудио потока, WebRTC для real-time.

Первым серьёзным web player был Flash (умер в 2020). В React эпоху — Video.js (2010) как стандарт. Большая plugin-экосистема, но дизайн из 2010-х, JQuery-like архитектура.

В 2023-2024 появились современные headless players: Vidstack (React-first) и Media Chrome (web components от Mux). Вы пишете свой UI из примитивов — <media-play-button>, <media-time-range>. Это то же переосмысление что в UI: styled → headless.

Отдельно развивались streaming libraries: hls.js для HLS где нет native support (не-Safari), Shaka Player (Google) — HLS + DASH

• DRM, dash.js — DASH-specific.

Для работы со звуком на низком уровне — native Web Audio API (2011), обёртки Howler.js (game audio), Tone.js (синтез музыки), Wavesurfer.js (waveform визуализация).

Почему мы здесь: веб стал primary platform для медиа-контента (Netflix, YouTube, Spotify, Twitch — все web-apps). Потребовались specialized инструменты для streaming, кастомных плееров, DRM. Nativный <video> недостаточен. Категория: Медиа-плееры и аудио/видео логика

Кастомный плеер с собственным UI, streaming (HLS/DASH), Web Audio API manipulations, WebRTC.

Headless плееры (логика + state, UI сам)

🏆 Vidstack — React-first headless

Unstyled компоненты и hooks. Поддержка HLS, DASH, YouTube, Vimeo. Кастомные UI пишете сам. Получил массовое распространение в 2024-2026 как замена Video.js для новых React проектов.

🏆 Media Chrome — Web components от Mux

Web components — работают с любым фреймворком (React, Vue, Svelte, vanilla). Вы пишете UI через <media-play-button>, <media-time-range>, они общаются с <video>. Хорош когда делаете компонент-библиотеку которая должна работать везде.

Styled плееры (готовый UI)

🥈 Plyr — Красивый default

Лёгкий, настраиваемый, красивый UI из коробки. Есть React обёртка. Быстро запускается когда не нужен полный контроль над UX.

⚠️ Video.js — Legacy но живой

Старый стандарт. Много плагинов (10+ лет экосистемы). Для новых проектов — Vidstack лучше, но Video.js остаётся рабочим выбором где уже используется.

Низкоуровневые для streaming

🏆 hls.js — HLS в браузере

Стандарт для HLS streams там где браузер не поддерживает нативно (не-Safari). Работает с любым плеером.

🥈 Shaka Player — HLS + DASH + DRM

От Google. Универсальный — HLS, DASH, DRM (Widevine, PlayReady, FairPlay). Для enterprise streaming (Netflix-like). Сложнее в настройке но больше возможностей.

◽ dash.js — DASH-specific

Если нужен именно MPEG-DASH streaming. От DASH Industry Forum. Менее универсален чем Shaka.

Аудио API / синтез

🏆 Howler.js — Game audio

Для игрового/app аудио. Audio sprites, fades, crossfading, simultaneous playback. Не плеер с UI — API для работы со звуком. Fallback с Web Audio на HTML5 Audio.

🥈 Tone.js — Синтез / музыка

Генерация звука через Web Audio API. Synthesizers, effects, scheduling. Для интерактивных audio-приложений, веб-музыки.

◽ Wavesurfer.js — Waveform визуализация

Отображает waveform аудиофайла на canvas. Для audio editors, podcasts, voice messages. По сути headless — даёт canvas и API, UI контролов делаете сам.

Нативные API (часто достаточно)

Иногда сторонние библиотеки не нужны вообще — нативные API покрывают задачу:

• Web Audio API — анализ, эффекты, синтез

• MediaRecorder API — запись с микрофона или камеры

• WebRTC — peer-to-peer аудио/видео

• simple-peer / PeerJS — если WebRTC сам по себе сложен

Maps

Google Maps в 2005 революционизировал web — показал что в браузере можно делать сложные интерактивные приложения (AJAX стал популярным именно через Maps). Долго Google Maps JS API был дефолтом но платным с сильной зависимостью от Google.

В 2011 появился Leaflet — open source, лёгкий, tile-based. Использовать любые tile sources (OpenStreetMap free, кастомные серверы). Стандарт для “просто нужна карта с маркерами”.

В 2014 Mapbox выпустил Mapbox GL JS с vector tiles. Отличие от tile-based подхода: вместо картинок сервер отдаёт геометрию (точки, линии, полигоны), клиент её рендерит через WebGL. Smooth zoom, 3D buildings, кастомная стилизация на клиенте. Премиум experience.

В 2020 Mapbox сменил лицензию на non-open-source. Community форкнул последнюю open version как MapLibre GL JS. Сейчас это стандартный open source vector tiles engine.

Для сложной визуализации на картах — deck.gl от Uber (2016). Накладывается на Mapbox/Leaflet, даёт WebGL-rendered heatmaps, trajectories, 3D columns. Используется для data-heavy геоданных.

Почему мы здесь: geospatial data стала mainstream (Uber, food delivery, fitness tracking). Free alternatives (Leaflet, MapLibre) достаточно хороши для 90% продуктов, Mapbox — для premium UX. Категория: Карты

🏆 Leaflet / react-leaflet — Open source default

Open source, бесплатный, работает с любыми map tiles (OpenStreetMap, Mapbox, свои сервера). Для простых карт — оптимальный выбор. Лёгкий, надёжный.

🥈 Mapbox GL JS — Красивые vector tiles

Vector tiles дают smooth zoom, 3D буилдинги, кастомная стилизация. Коммерческий (бесплатный tier ограничен), но для consumer продуктов с красивыми картами — best in class. react-map-gl для React-обёртки.

🥈 MapLibre GL JS — Open source fork Mapbox

Форк Mapbox GL JS до смены лицензии в 2020 на non-open-source. Полностью open source, совместим с Mapbox стилями. Для проектов которые хотят функционал Mapbox но без vendor lock-in.

◽ Google Maps JS API — Если нужна Google экосистема

Places, routes, Street View, локальные данные. Дорогой API. Для продуктов где критичны Google данные (местная реклама, POI).

◽ deck.gl — Геоданные dataviz

От Uber. Для сложной визуализации на картах — heatmaps, trajectories, 3D columns. WebGL-based. Накладывается поверх Mapbox или Leaflet.

File upload

Native <input type="file"> некрасивый и ограниченный. Пользователи ожидают drag-and-drop, preview, progress bar, resume на прерванном upload, upload из cloud storage (Google Drive, Dropbox).

Для простого “drop zone” появился react-dropzone (2015) — лёгкий hook для drop area с file validation. Для полного experience — Uppy (2017) от Transloadit с dashboard UI, tus.io resumable uploads, integration с cloud sources.

Почему мы здесь: file upload в 2010 был “выбери файл — жди”. Сейчас пользователи ожидают Dropbox-like experience: drag, preview, progress, resume, multiple files, cloud imports. react-dropzone для простого, Uppy для сложного. Категория: Upload файлов

🏆 react-dropzone — Минимальный default

Hook + компонент для drag-and-drop зоны. File validation, preview, progress. Лёгкий, без navbar и лишнего UI. Вы сам оформляете.

🥈 Uppy — Полноценный dashboard

Готовое UI-решение — dashboard с preview, progress, resume, cloud imports (Google Drive, Dropbox, Instagram). Для продуктов где upload это центральная функция.

Toast / notifications

Toast notifications — маленькие всплывающие сообщения (“Saved!”, “Error”, “Copied to clipboard”). Звучит просто, но нужно правильно: stack из нескольких toasts, auto-dismiss с таймером, action buttons, promise-based (show loading → success/error), accessibility.

Первый популярный был react-toastify (2017) — полный набор функций но дизайн из 2017. В 2020 появился react-hot-toast — проще, красивее, tiny bundle.

В 2023 Emil Kowalski (создатель shadcn/ui примитивов) выпустил Sonner — ещё минималистичнее, с layout animations, promise API, нативно в shadcn/ui. Стал стандартом в новых проектах.

Почему мы здесь: microinteractions важны для UX. Sonner показал что toast может быть deeply polished — smooth animations, perfect typography, accessible. После него react-toastify выглядит устаревшим. Категория: Всплывающие уведомления

🏆 Sonner — Default 2026

От создателя shadcn/ui (Emil Kowalski). Minimalist, beautiful, accessibility из коробки. Stack множественных toasts, promise-based API. Стандарт в shadcn-based проектах.

🥈 react-hot-toast — Популярная альтернатива

Ещё проще Sonner. Один toast.success() и всё работает. Меньше функций но хватает в большинстве случаев.

⚠️ react-toastify — Legacy

Старый стандарт. Больше возможностей но API устарел, дизайн из 2020. Для новых проектов — Sonner.

Modal / command menu

Две связанных но разных категории. Modal / Dialog — overlay с контентом, блокирующий остальной UI. Требует правильной a11y: focus trap, Escape для закрытия, aria-modal, restore focus на trigger при закрытии.

Второе — Command menu (Cmd+K). Сначала появился в VSCode (Ctrl+Shift+P), потом Linear сделал его центром UX (“всё через Cmd+K”), потом Raycast, GitHub.com, Notion — все добавили. Стал новым стандартом power-user интерфейса.

Для modals — Radix Dialog решает все a11y проблемы. Для command palette — cmdk (2022) от Paco Coursey: fuzzy search, keyboard navigation, группировка команд. Оба интегрированы в shadcn/ui.

Почему мы здесь: power users хотят клавиатурную навигацию везде. Cmd+K стал индикатором “современного продукта”. Radix + cmdk покрывают оба паттерна с правильной a11y. Категория: Модалки, dialog, command palette

🏆 Radix Dialog — Для модалок

Часть Radix UI. Правильная a11y, focus trap, Escape для закрытия, ARIA. Через shadcn/ui приходит в проект с готовым Tailwind-дизайном.

🏆 cmdk — Command palette

От Paco Coursey. Сtrl+K command menu как в VSCode, Linear, Raycast. Fuzzy search, keyboard navigation, группировка команд. Интегрирован в shadcn/ui как Command component.

Routing (non-Next.js проекты)

SPA (Single Page Application) — один HTML файл, JavaScript меняет контент без reload. Но пользователи ожидают что URL меняется (кнопка “назад” работает, можно поделиться ссылкой). Router делает эту магию — сопоставляет URL с компонентами.

Первым доминирующим был React Router (2014) от Michael Jackson и Ryan Florence (оба позже основали Remix). Прошёл через много API редизайнов (v3, v4, v5, v6, v7 — каждая несовместима с предыдущей). Сейчас v7 (2024) после merge с Remix — поддерживает и SPA, и framework mode.

В 2023 Tanner Linsley начал TanStack Router — type-safe по всему. Каждый route типизирован, searchparams — first-class citizens с типами, data loaders. Для TypeScript-heavy проектов это game-changer.

Для Next.js роутинг — свой (App Router based на React Server Components), не нужны сторонние библиотеки.

Почему мы здесь: TypeScript стал default, разработчики хотят чтобы routes тоже были типобезопасными. TanStack Router удовлетворил этот запрос лучше чем React Router v7. Категория: Client-side routing

Если используете Next.js — у него свой routing. Для Vite-based SPA выбор ниже.

🏆 TanStack Router — Type-safe default

Type-safe end-to-end, file-based или code-based config. Searchparams как first-class citizens с типизацией. Data loaders похожие на Remix/React Router. Лучший роутер для TypeScript-heavy проектов в 2026.

🥈 React Router v7 — Классика

После merge с Remix в v7 — поддерживает loader/action data pattern. Может работать и в SPA режиме (data mode) и в framework mode (замена Next.js). Огромное сообщество, много туториалов.

Internationalization

Internationalization (i18n — “i” + 18 букв + “n”) — поддержка нескольких языков в приложении. Включает translations, pluralization (“1 message” vs “2 messages”), date/number formatting по locale, RTL языки (arabic, hebrew), dynamic locale switching.

Первым был i18next (2011) — framework-agnostic библиотека. Обёртка react-i18next (2015) стала стандартом для React. Pluralization, interpolation, namespace separation, lazy loading переводов.

Для больших проектов с кучей translation keys нужен translation management — процесс где translators видят unfamiliarcontext. Появились services: Crowdin, Locize, Lokalise. Библиотеки типа Lingui добавили автоматическую извлечение строк из кода в JSON для translation management.

ICU MessageFormat — стандарт от Unicode для сложных сообщений (gender, plurals с условиями). FormatJS (react-intl) поддерживает его. Сложнее но мощнее.

С приходом Next.js App Router нужна была i18n совместимая с RSC. next-intl (2022) решил эту задачу: routing по locale (/en/about), server components с translations, статическая генерация локализованных страниц.

Почему мы здесь: SaaS продукты должны поддерживать несколько языков с первого дня. react-i18next — для SPA, next-intl — для Next.js. Категория: Переводы / локализация

🏆 react-i18next — Default

Самый популярный i18n для React. Pluralization, interpolation, nested translations, namespace separation. Встроенный детект языка, lazy load переводов по namespaces.

🥈 next-intl — Для Next.js

Интегрирован с Next.js App Router. Routing по локали (/en/about), RSC-совместим, статическая генерация локализованных страниц. Для Next.js проектов с i18n — этот лучше чем react-i18next.

◽ Lingui — Message extraction

Автоматически извлекает строки из исходного кода в JSON-файлы для перевода. Интеграция с Crowdin, Locize для translation management. Для больших multilingual проектов — хороший выбор.

◽ FormatJS (react-intl) — ICU message format

ICU syntax — мощный формат сообщений включая сложный pluralization, gender. Стандарт в enterprise. Сложнее других.

Realtime / collaboration

Real-time collaboration — когда несколько пользователей редактируют один документ и видят изменения друг друга мгновенно. Google Docs (2006) первым показал что это возможно в вебе. Figma (2016) сделал это центральной фичей для дизайна. Notion, Linear, всех современных B2B продуктов требуют collaboration.

Техническая проблема: когда два пользователя редактируют одно место одновременно, как мерджить изменения без конфликтов? Два подхода.

Operational Transform (OT) — trasformations делаются на сервере. Google Docs использует. Работает, но требует центральный сервер, сложно реализовать, не работает offline.

CRDT (Conflict-free Replicated Data Type) — структура данных где операции коммутативны и ассоциативны. Математически гарантирует что при любом порядке применения операций результат одинаковый. Нет центрального сервера, работает offline. Исторически был impractical из-за размера метаданных — но в 2010-х исследователи (в т.ч. Martin Kleppmann) разработали эффективные реализации.

В 2015 Kevin Jahns начал Yjs — самую популярную CRDT-библиотеку для веба. Интеграция с TipTap, CodeMirror, Monaco, ProseMirror. Транспорты (y-websocket, y-webrtc, y-indexeddb) позволяют выбрать любую архитектуру.

Managed сервисы на базе Yjs: Liveblocks (2021) — presence, cursors, comments из коробки. PartyKit (2023) — на Cloudflare Workers, дёшево. Для simple real-time (chat, notifications) без CRDT достаточно WebSocket: Socket.io, Ably, Pusher.

Почему мы здесь: collaboration стала expected feature в B2B продуктах. Yjs демократизировал collaborative editing — раньше это требовало в команде PhD по distributed systems, сейчас достаточно установить npm package. Категория: Real-time sync / совместное редактирование

Когда несколько пользователей видят изменения друг друга мгновенно: Figma-like, Notion-like, Google Docs-like.

🏆 Yjs — CRDT стандарт

CRDT (Conflict-free Replicated Data Type) библиотека — без конфликтов мерджит одновременные изменения. Транспорты: y-websocket (свой сервер), y-webrtc (P2P), y-indexeddb (local-first). Интеграция с TipTap, CodeMirror, ProseMirror, Monaco. Основа Notion, Figma-like продуктов.

🥈 Liveblocks — Managed сервис

SaaS на базе Yjs. Не нужен свой сервер. Presence, cursors, comments, history. Для продуктов где collaborative editing нужен быстро и bandwidth второстепенна. Платный (есть free tier).

🥈 PartyKit — На Cloudflare

Realtime платформа на Cloudflare Workers + Durable Objects. Очень дешёвый scale. Подходит для presence, multiplayer cursors, chat.

◽ Automerge — Альтернатива Yjs

Другой CRDT. Проще для некоторых use cases, но меньшая экосистема. Популярен в local-first движении (Martin Kleppmann).

◽ Socket.io / Ably / Pusher — Pub/sub realtime

Если не нужен full CRDT sync, а просто “push events in real time” — Socket.io (self-hosted), Ably/Pusher (managed). Для chat, notifications, live feeds.

Authentication

Authentication — регистрация, логин, password reset, email verification, MFA, OAuth (войти через Google/GitHub), session management, RBAC (роли и разрешения). Легко недооценить сложность — сотни edge cases, security vulnerabilities, compliance требования.

Раньше все писали своё или использовали Auth0 (2013) — managed сервис. Качественный но дорогой, сложный для маленьких продуктов.

В 2018 появился NextAuth.js (позже переименован в Auth.js) — open source auth для Next.js. Бесплатный, 50+ OAuth providers. Но UI писать самому, многие фичи (organizations, MFA) требуют кастомной работы.

В 2022 Clerk произвёл революцию: managed auth с готовыми React компонентами. <SignIn/>, <UserProfile/>, <OrganizationSwitcher/> — вставляете и работает. Полный функционал (MFA, organizations, SSO, webhooks). Free tier до 10k MAU. Стал стандартом для SaaS.

В 2024 появился Better Auth — claim “type-safe framework agnostic Auth.js”. Open source, быстро растёт в популярности. Для тех кто не хочет зависеть от Clerk.

Для enterprise (SAML, SCIM, SOC2, HIPAA) — Auth0, Okta, WorkOS.

Почему мы здесь: Clerk показал что auth может быть один npm install + drop-in компоненты. Скорость SaaS запуска сильно выросла. Auth.js и Better Auth — open source альтернативы для тех кто не хочет vendor lock-in. Категория: Auth / управление пользователями

🏆 Clerk — Managed, готовые UI

Полный набор: signup/login/MFA/organizations/SSO/webhooks. Готовые React компоненты — <SignIn/>, <UserProfile/>. Стал стандартом для SaaS в 2023-2026. Платный (есть free tier до 10k MAU).

🥈 Auth.js (ex-NextAuth) — Open source

Open source альтернатива Clerk. Поддерживает Next.js, SvelteKit, Express. 50+ OAuth providers. UI пишете сам. Если не хочется платить за Clerk и готов потратить время на кастомизацию.

🥈 Better Auth — Новый, набирает

2024 год рождения. Claim — “type-safe framework agnostic Auth.js замена”. Быстро растёт в популярности. Если начинаете новый проект и Auth.js кажется тяжёлым — попробовать.

◽ Supabase Auth — Если уже Supabase

Если backend на Supabase — auth встроенный. Magic links, OAuth, MFA, RLS policies. Интегрирован со всей остальной Supabase инфраструктурой.

◽ Auth0 / Okta — Enterprise

Для enterprise с SAML, SCIM, compliance requirements (SOC 2, HIPAA). Сложнее чем Clerk, но делает то что нужно в больших организациях.

Testing (unit / component)

Testing JavaScript исторически был болью. До 2013 основной инструмент — Mocha + Chai, требовали много setup. В 2014 Facebook открыл Jest — zero-config из коробки, snapshot testing, auto-mocking. Jest стал стандартом для React на 10 лет.

Для компонентов был Enzyme (2015) от Airbnb с API типа shallow().find('.button').simulate('click'). Но философия Enzyme поощряла testing implementation details — тесты ломались при любом рефакторинге.

В 2018 Kent C. Dodds выпустил React Testing Library с противоположной философией: “test like a user”. Используй getByRole, userEvent.click — тестируй через то что видит пользователь, не через internal React state. Быстро победил Enzyme.

Jest работал хорошо, но был медленный на больших проектах (все файлы компилируются Babel-ом) и плохо поддерживал ESM. В 2021 команда Vite начала Vitest — Vite-native test runner, Jest-compatible API. В 2-10 раз быстрее, нативная ESM поддержка, TypeScript из коробки. К 2024 Vitest стал стандартом для новых проектов.

Почему мы здесь: “test like a user” философия стала правильной. А Vitest заменил Jest потому что скорость важна — когда тесты бегут 30 секунд вместо 5 минут, люди их чаще пишут. Категория: Unit / component тесты

🏆 Vitest — Default 2026

Vite-native, Jest-compatible API. В 2-10 раз быстрее Jest. Native ESM, TypeScript из коробки, встроенный UI для тестов. Стандарт для новых проектов.

🏆 React Testing Library — Всегда вместе с Vitest

Не конкурирует с test runner-ами, работает поверх них. Философия “тестируй как пользователь”. getByRole, userEvent — симулирует реальные действия. Де-факто стандарт для компонентных тестов.

🥈 Jest — Legacy но живой

От Meta. 10 лет стандартом был. Сейчас проигрывает Vitest по performance и DX. Для новых проектов — Vitest, для legacy — остаётся.

◽ Storybook — Visual testing

Не совсем unit-тестер — sandbox для компонентов с stories. Но с Storybook Test Runner

• Chromatic — visual regression testing. Стандарт для документации компонентов.

E2E testing

E2E (end-to-end) testing — запускаем приложение как пользователь, в настоящем браузере, выполняем сценарии. Самые близкие к реальности тесты.

Стандартом долго был Selenium (2004) — slow, flaky, требует отдельного WebDriver. Все ненавидели но использовали.

В 2017 вышел Cypress — запускается в самом браузере (как JavaScript sandbox), мгновенный feedback, time-travel debugging. Революция в E2E DX. Minus — только Chromium/Firefox (без Safari), медленнее чем нужно на больших suite.

В 2020 Microsoft выпустил Playwright — от команды которая делала Puppeteer (Google). Все три браузера: Chromium, Firefox, WebKit (Safari). Быстрее Cypress, лучше параллелизация, отличный trace viewer. К 2023-2024 Playwright обогнал Cypress по популярности в новых проектах.

Puppeteer от Google остался для scraping, PDF generation, screenshot automation — не для тестов.

Почему мы здесь: E2E тесты критичны для серьёзных продуктов, но ценой medленно бегут. Playwright радикально улучшил этот tradeoff — быстрее + надёжнее Cypress. Категория: Browser automation / E2E

🏆 Playwright — Default 2026

От Microsoft. Мульти-браузерный (Chromium, Firefox, WebKit), быстрый, надёжный auto-waiting. Trace viewer для дебага. Заменил Cypress как стандарт в 2023-2024.

🥈 Cypress — Всё ещё популярный

Лучший DX был до Playwright. Component testing тоже умеет. Только Chromium и Firefox (без WebKit). Проигрывает Playwright по скорости и надёжности, но много команд продолжают использовать.

◽ Puppeteer — Низкоуровневая автоматизация

От Google. Сейчас реже для тестов (Playwright лучше), но актуален для скрапинга, PDF generation, screenshot automation.

Monitoring / analytics

Production код ломается по-разному. Backend монитуринг (Datadog, New Relic) был давно, но для frontend было слабо. Ошибки у пользователя невидимы если никто их не ловит.

В 2012 появился Sentry — open source error tracking. Подключаете SDK, ошибки из production автоматически собираются с stack trace, browser info, user actions до ошибки. Сейчас doctrine — каждое serious приложение должно иметь Sentry или аналог.

Sentry потом расширился в performance monitoring (API latency, page load time, Core Web Vitals), session replay (видео что делали пользователь перед ошибкой).

Параллельно развивалась product analytics — не ошибки, а behavior: кто куда кликал, какие фичи используются, conversion funnels. Раньше доминировали Google Analytics + Mixpanel

• Amplitude. В 2020 PostHog принёс open source аналог с возможностью self-host. Включает feature flags, A/B tests, session replay. Стал стандартом для startups.

Для сайтов где privacy важна и не нужна глубокая аналитика — privacy-first решения: Plausible, Fathom, Umami. Без cookies, GDPR-compliant, маленький JS snippet.

Почему мы здесь: без error tracking production-продукт слеп. Без product analytics — не понимаете что работает, а что нет. Sentry + PostHog — стандартный minimum для serious продукта. Категория: Error tracking и аналитика

🏆 Sentry — Error tracking default

JS errors, performance monitoring, session replay. Интеграция с React, source maps для читаемых stack traces. Используется в 70% production приложений.

🏆 PostHog — Product analytics

Open source аналитика (альтернатива Mixpanel, Amplitude). Events, session replay, feature flags, A/B tests — всё в одном. Можно self-hosted.

🥈 Datadog RUM — Enterprise

Real User Monitoring. Core Web Vitals, session replay, frontend errors. Полная обсервабильность если уже используете Datadog для backend.

◽ Plausible / Fathom / Umami — Privacy-first

Lightweight аналитика без cookies, GDPR-compliant без баннеров. Для сайтов где privacy важна. Umami — open source, self-host бесплатно.

Accessibility tools

Accessibility (a11y — “a” + 11 букв + “y”) — доступность для людей с инвалидностью. Screen readers для слепых, keyboard navigation (без мышки, что важно и для моторных ограничений и для power users), contrast для слабовидящих, captions для видео.

До 2016 это было “nice to have”. ADA (Americans with Disabilities Act) в США начал применяться к вебу — пошли судебные иски против недоступных сайтов (Domino’s Pizza проиграл в Supreme Court в 2019). В EU — Web Accessibility Directive (2016) для government сайтов, European Accessibility Act (2025) — для коммерческих сервисов.

Стало юридическим требованием. Manually проверять accessibility невозможно (тысячи критериев). Появились автоматизированные инструменты.

axe-core (2015) от Deque Systems — де-факто стандартный engine для автоматизированной a11y проверки. Интегрирован с Playwright, Storybook, Lighthouse. Lighthouse (Google) включает a11y score в общий audit.

Автоматизированные инструменты ловят только 30-40% проблем. Для полной проверки нужны manual audits (screen reader usage testing) и хорошие headless primitives (Radix, react-aria) с правильной a11y по умолчанию.

Почему мы здесь: a11y из опции стала юридическим требованием. Команды которые не делали audit — получают иски. Инструменты автоматизации + a11y-first primitives (Radix, react-aria) делают базовую compliance достижимой. Категория: A11y инструменты

🏆 axe-core / @axe-core/react — Автоматизированная проверка

Де-факто стандарт для автоматизированного a11y тестирования. В dev-режиме выводит warnings в консоль. Интегрируется с Playwright, Storybook, Lighthouse.

🥈 Lighthouse / Pa11y — В CI

Lighthouse CI запускается в pipeline, проверяет a11y score на PR. Pa11y — похожий инструмент для headless проверки.

Monorepo tools

Категория: Monorepo / multi-package management

Когда у вас несколько связанных пакетов в одном репо — webapp, mobile, design-system, shared utils. Нужны инструменты для shared dependencies, parallel builds, incremental caching.

Раньше каждый пакет был отдельным репозиторием. Это упростило ownership но создало проблемы: shared code (utils, types, design system) либо дублировался, либо публиковался как npm пакет с painful versioning. Synchronized changes между пакетами стали болью.

Google и Facebook давно использовали monorepos (один гигантский репо для всего) с кастомными build системами (Bazel, Buck). Веб-сообщество пошло другим путём — multi-package monorepos через npm/yarn/pnpm workspaces + специализированные инструменты для caching и orchestration.

В 2017 появился Lerna — первый mainstream tool для multi-package npm repos. К 2020 устарел. Nx (от Nrwl, ex-Google Angular team) и Turborepo (от Vercel) стали стандартами 2022+.

Почему мы здесь: монолитные SaaS компании выросли до точки где разделение на repos больше тормозит чем помогает. Coordinated changes (изменил API в backend → нужно обновить frontend types) проще в monorepo. Build caching между пакетами экономит часы CI. 🏆 Turborepo — Default 2026 для новых

От Vercel. Минималистичный — turbo.json конфиг + pnpm workspaces. Incremental builds через remote cache (бесплатный у Vercel, self-host тоже можно). Хорошая интеграция с Next.js. Стал стандартом для команд 2-15 разработчиков.

🏆 Nx — Enterprise / большие monorepos

Больше Turborepo по features: code generators, dep graph visualization, integration с Cypress/Storybook/Jest, plugin ecosystem. Сложнее в начале (steep learning curve), но мощнее на масштабе 50+ packages. Используется в Microsoft, Cisco, Capital One.

🥈 pnpm workspaces — Базовый уровень

Если monorepo маленький (3-5 packages) и нет нужды в caching/orchestration — pnpm workspaces достаточен. pnpm -r run build запускает в каждом package. Никакого специфичного tool не требуется.

🥈 Bun workspaces — Если уже на Bun

Альтернатива pnpm. Очень быстрая install и run. Для команд использующих Bun как runtime. Менее зрелая экосистема для monorepo-specific tools.

⚠️ Lerna — Deprecated

Был стандартом 2017-2020. После acquisition Nrwl maintains как часть Nx. Для новых проектов не нужен — Turborepo проще, Nx мощнее.

◽ Changesets — Versioning + changelog

Не monorepo tool сам по себе, а versioning helper. Контрибьюторы создают .changeset файлы при PR с описанием изменений. На release tool автоматически bumps versions, генерирует changelog, публикует в npm. Используется в shadcn/ui, Tailwind, многих open source.

Backend-as-Service (BaaS)

Категория: Готовый backend без собственного сервера

Database + auth + realtime + storage + functions через managed сервис. Для startup’ов которые хотят MVP за дни, не месяцы.

Firebase (2011, куплен Google в 2014) был первым серьёзным BaaS — Realtime Database + Auth + Hosting. Революция для frontend devs которые могли запустить full-stack без написания backend.

Долгое время Firebase доминировал но имел проблемы — vendor lock-in, NoSQL only (Firestore хотя SQL-like), сложный pricing на масштабе. Frontend community ждала open source альтернативу.

В 2020 появился Supabase — “Firebase на PostgreSQL”. Open source, self-hostable, real SQL database. Очень быстро рос. К 2026 стал стандартом для новых side projects и стартапов.

Параллельно появились более специализированные: Convex (2022) — TypeScript-first reactive backend, Liveblocks для realtime collaboration, Clerk для auth-only.

Почему мы здесь: написать свой backend (DB schema + auth + API + deploy) — недели работы. Для MVP это излишне. BaaS закрывает 80% потребностей за часы. Когда бизнес валидируется — мигрируете на свой backend (но часто не мигрируете, потому что Supabase/Convex масштабируется хорошо). 🏆 Supabase — Default open source BaaS

Postgres + Auth + Storage + Realtime + Edge Functions. Open source, self-hostable. SQL вместо NoSQL — больше контроля, лучше для сложных queries. Row Level Security policies прямо в БД. Стандарт для startup’ов 2024-2026.

🏆 Convex — TypeScript-first reactive

Backend пишется на TypeScript, типы автоматически прокидываются на client. Reactive queries — UI автоматически обновляется когда data меняется (без manual subscriptions). Хорош для realtime приложений (chat, collaboration). Платный после free tier.

🥈 Firebase — Legacy лидер

Всё ещё доминирует на mobile (Android особенно). Firestore, Auth, Hosting, Cloud Functions, FCM push notifications. Минусы — NoSQL, vendor lock-in, complex pricing. Новые web проекты чаще выбирают Supabase.

🥈 Appwrite — Self-host first

Open source, ориентирован на self-hosting. Functions, Auth, DB, Storage. Альтернатива Supabase для команд которые хотят контролировать инфру. Менее популярен но активно развивается.

◽ Pocketbase — Single binary

Один Go binary — всё включено (DB на SQLite, Auth, Realtime). Для маленьких проектов идеально — деплой на любой VPS, бесплатно. Не масштабируется на миллионы пользователей, но для MVP и internal tools — отлично.

◽ Hasura — GraphQL on Postgres

Автоматически генерирует GraphQL API из существующей Postgres БД. Permissions через JWT claims. Хорош когда уже есть БД и нужен быстро GraphQL слой.

Edge runtime / Edge functions

Категория: Serverless на edge nodes

Запуск кода географически близко к пользователю. Между традиционными serverless functions (us-east-1) и CDN (статика).

Cloudflare Workers (2017) был первым серьёзным edge runtime. V8 isolates вместо контейнеров — старт в миллисекунды, не секунды. Запуск в 300+ дата-центрах по миру.

В 2021-2022 все major hosting платформы выкатили свои edge: Vercel Edge Functions, Netlify Edge Functions, Deno Deploy. К 2024 edge стал стандартной частью deployment pipeline.

Почему мы здесь: latency имеет значение для UX. API request из Tokyo в us-east-1 — 200мс минимум только на сеть. Edge node в Tokyo — 5-20мс. Для streaming AI ответов, real-time коллаборации, A/B testing на granular уровне это критично.

Главное ограничение: edge runtime — урезанный Node.js. Нет fs, нет нативных Node modules. Только Web APIs (fetch, crypto, streams). Это заставляет писать более портабельный код. 🏆 Cloudflare Workers — Самый зрелый edge

V8 isolates, очень быстрый cold start (~5ms). Durable Objects для stateful workloads. KV / R2 / D1 для storage. Самая большая edge сеть. Pricing щедрый. Стал стандартом для serious edge projects.

🏆 Vercel Edge Functions — Если уже Next.js

Интегрирован с Next.js — ставишь export const runtime = 'edge' и route выполняется на edge. Хорошо для middleware, A/B testing, geo-routing. Под капотом — Cloudflare Workers (раньше) или своя платформа (сейчас).

🥈 Deno Deploy — Если на Deno

Edge для Deno. TypeScript-native, Web standards APIs. Быстрый cold start. Меньше edge nodes чем Cloudflare. Для команд использующих Deno — естественный выбор.

🥈 Bun Edge / Vercel Functions — Растущие альтернативы

Bun имеет планы на edge runtime. Vercel Functions (классические serverless, не edge) — простой выбор для пользователей Vercel когда edge ограничения не подходят.

◽ Fastly Compute — Enterprise CDN+edge

WebAssembly-based edge от Fastly. Performance топовый, но сложнее в разработке. Для enterprise где CDN уже Fastly.

GraphQL clients

Категория: GraphQL-specific фронтенд библиотеки

Если бэкенд GraphQL — нужен client который умеет caching, fragments, subscriptions. Простого fetch недостаточно.

GraphQL появился в Facebook в 2012, открыт публично в 2015. Главная идея — клиент описывает что нужно (query), сервер возвращает ровно это. Решает overfetching/underfetching REST APIs.

Для использования нужен client который handles caching (one Person может прийти из разных queries), normalization (если изменили name — обновить везде), subscriptions (real-time updates через WebSocket).

Apollo Client (2017) стал доминирующим. Relay — официальный от Meta, мощнее но сложнее. urql — проще Apollo. К 2026 ландшафт стабилизировался.

В 2024-2026 рост tRPC съедает часть use cases GraphQL — для full-stack TypeScript команд проще tRPC чем GraphQL pipeline. Но для public APIs и команд с разными languages frontend/backend — GraphQL остаётся. 🏆 Apollo Client — Default для GraphQL

Самый зрелый, самый большой ecosystem. Normalized cache, optimistic UI, subscriptions, Apollo DevTools. Минусы — большой bundle (~40KB), много возможностей которые редко нужны. Default выбор когда команда не имеет специфических preferences.

🏆 Relay — Meta-grade scale

От Facebook. Compile-time оптимизации queries, fragment colocation philosophy, лучшая performance на масштабе. Steep learning curve. Используется когда у вас GraphQL schema из тысяч типов и Apollo становится bottleneck.

🥈 urql — Лёгкий Apollo

От Formidable Labs. Меньше Apollo (~5KB), document caching по умолчанию (можно включить normalized как Apollo). Хорош для маленьких приложений или когда Apollo overkill.

🥈 gql.tada — Type safety без codegen

Не сам client, а layer для type safety. TS magic — выводит types из inline GraphQL queries без отдельного codegen step. Используется поверх любого client.

◽ graphql-request — Минимальный fetch

Просто typed fetch для GraphQL без caching. Когда нужен один-два запроса и не нужна сложность Apollo — graphql-request + TanStack Query закроет всё.

◽ tRPC — Альтернатива для full-stack TS

Не GraphQL клиент, а альтернатива GraphQL целиком для full-stack TypeScript. End-to-end type safety без schema language, без codegen. Бэкенд и фронт в одном monorepo. Если вы владеете backend и он на Node — tRPC обычно лучше выбор чем GraphQL.

Markdown / MDX rendering

Категория: Рендер markdown в React

Для блогов, документации, AI чатов, comments с форматированием. Стандартная задача с нюансами в performance и customization.

Markdown появился в 2004 (Gruber, Aaron Swartz). Простой способ форматирования текста. Веб-сообщество добавило расширения — GFM (GitHub Flavored Markdown) с tables, strikethrough, task lists.

Чистый markdown показал ограничения — нет custom components, нельзя интерактивные блоки. MDX (2018) решил это — markdown + JSX в одном файле. Теперь можно писать <ChartComponent data={...} /> прямо в .mdx файле.

В 2024-2026 категория стала особенно важной из-за бума AI чатов — все они стримят markdown ответы. Это revealed performance issues стандартных рендереров (см. ChatGPT кейс в System Design главе). 🏆 react-markdown + remark/rehype — Default для простых случаев

Стандартный pipeline через unified ecosystem. Plugin-based: remark-gfm для tables, rehype-highlight для code, rehype-sanitize для XSS. Для блога / простой документации работает отлично. Для длинных AI чатов — перформанс проблемы (см. кейс ChatGPT).

🏆 MDX (next-mdx-remote, @mdx-js/react) — Для документации с интерактивом

Когда документация требует интерактивные демо, custom components, charts — MDX позволяет вставлять JSX в markdown. Используется в docs Vercel, Tailwind, shadcn/ui. next-mdx-remote для Next.js, @mdx-js/react для остальных.

🥈 Streamdown — Для AI streaming

От Vercel (2024). Специально для streaming markdown в AI чатах. Block-level memoization — re-render только последний блок при streaming. Решает performance issues react-markdown для long AI responses. Растёт быстро.

🥈 marked + DOMPurify — Минималистичный

Маленький bundle, быстрый. Без plugin ecosystem react-markdown. Для случаев где нужно просто отрендерить markdown без сложных трансформаций.

◽ Contentlayer — MDX content management

Type-safe content из MDX файлов. Content schema через TS types. Интегрируется с Next.js. Был популярен в 2022-2023, сейчас maintenance mode (создатель ушёл).

◽ Velite — Замена Contentlayer

Активно разрабатывается, замена Contentlayer. Type-safe content layer с Zod validation. Используется в shadcn/ui docs.

Search backends (frontend integration)

Категория: Search engines и их frontend libraries

Полнотекстовый поиск, fuzzy matching, faceted filters, instant results. Не для каталогов из 100 items (там Array.filter), а для реального search.

Полноценный search — это backend задача (индексация, ranking, typo tolerance). PostgreSQL/MySQL имеют basic full-text search но не масштабируется. Elasticsearch (2010, основан Lucene) был стандартом для serious search долгие годы.

Elasticsearch сложен в setup и управлении. Algolia (2012) — managed search service, очень удобный API, но коммерческий. Meilisearch (2018) и Typesense (2018) — open source альтернативы, проще Elasticsearch.

Frontend часть — instant search UI с debounce, autocomplete, facets, highlighting matches. Каждый backend имеет свой клиент. 🏆 Algolia + react-instantsearch — Easiest premium

Лучший DX в категории. Готовые React компоненты для search box, hits, refinements, pagination. Typo tolerance и ranking из коробки. Платный (от $0.5 per 1000 search). Используется в Stripe docs, GitHub Marketplace, Slack search.

🏆 Meilisearch — Open source default

Single binary, очень быстрый setup. Typo tolerance и instant search out of the box. Self-host бесплатно или managed cloud. Хорошая альтернатива Algolia если бюджет ограничен.

🥈 Typesense — Algolia open source альтернатива

Очень похож на Algolia по API. Open source, self-hostable. Хорошая typo tolerance, vector search встроен. Активно конкурирует с Meilisearch.

🥈 Elasticsearch / OpenSearch — Enterprise scale

Самый мощный, самый сложный. Когда нужны custom ranking, complex queries, миллиарды документов. OpenSearch — fork от AWS после смены лицензии Elasticsearch. Используется когда search — core competency продукта.

◽ Fuse.js — Client-side fuzzy

Search полностью на клиенте. Подходит для маленьких datasets (до 10K items) когда не хочется backend. Fuzzy matching, weighted fields. Bundle ~10KB.

◽ FlexSearch / Lunr.js — Static site search

Для документации генерируемой статически (Astro, Next.js export). Индекс генерируется при build, search полностью на клиенте. Хорошо для блогов и docs.

Headless CMS

Категория: Content management для не-разработчиков

Когда не-технические люди (маркетинг, контент-команда) должны редактировать контент сайта без помощи разработчиков.

WordPress долгое время доминировал — full-stack CMS с frontend и admin panel в одном. Современный подход — headless CMS: backend хранит контент, отдаёт через API, frontend строится отдельно (Next.js, Astro, etc).

Это разделение даёт контроль над frontend (любой стек, любой дизайн) сохраняя UX редакторов. Плюс контент можно использовать на нескольких frontends — web, mobile, voice assistant — из одного источника.

Категория переполнена решениями. Главное разделение — cloud (managed) vs self-hosted, и git-based vs database-based. 🏆 Sanity — Default для content-heavy сайтов

Cloud-based. Studio (admin UI) кастомизируется на React — можно настроить под любой контент-flow. Реалтайм коллаборация для редакторов. GROQ query language для гибких queries. Free tier щедрый, платно от $99/месяц.

🏆 Contentful — Enterprise default

Cloud-based, более mature чем Sanity. Mature workflow approvals, multi-environment, multi-language. Дорогой. Используется крупными компаниями где CMS — критичная часть инфры.

🥈 Payload CMS — Self-hosted, code-first

Open source, self-hostable. Schema через TypeScript, автогенерация types и admin UI. Postgres или MongoDB. Активно растёт в 2024-2026 как альтернатива cloud решениям. В 2024 acquired by Figma.

🥈 Strapi — Open source veteran

Один из первых open source headless CMS. Visual schema builder, role-based permissions. Большая community. Минусы — REST/GraphQL APIs автогенерируются и иногда не оптимальны.

◽ Directus — Поверх существующей БД

Уникальная позиция — не своя БД, а layer поверх существующего Postgres/MySQL. Если у вас уже есть DB — Directus даёт CMS UI поверх неё без миграции данных.

◽ Tina CMS / Decap CMS — Git-based

Контент хранится как файлы в git репо, не в БД. Markdown/MDX/JSON files. Хорошо для статических сайтов где devs и контент-команда хотят работать в одном source-of-truth. Decap раньше назывался Netlify CMS.

◽ Builder.io — Visual page builder

Не классический CMS, а visual editor где маркетологи могут drag-drop собирать landing pages. Интегрируется с React/Next.js. Полезен для marketing-heavy продуктов.

Email templates / sending

Категория: Transactional emails в коде

Welcome emails, password reset, order confirmations, notifications. Рендеринг HTML emails — отдельная боль из-за legacy email clients (Outlook, Gmail).

HTML emails — это HTML 1990-х. Outlook рендерит через Word engine, Gmail обрезает styles, Apple Mail имеет свои quirks. Писать email templates руками — кошмар таблиц и inline styles.

В 2017-2019 появились template engines — MJML (Mailjet Markup Language), Foundation for Emails. Высокоуровневый XML/HTML который компилируется в bullet-proof email HTML.

В 2023 Resend запустил react-email — компоненты email пишутся как React JSX. Это стало game changer — frontend devs могут писать emails в знакомом stack. К 2026 стандарт. 🏆 react-email — Default 2026

React components для email templates. Богатый набор готовых компонентов (Button, Heading, Container). Live preview в dev. Compiles в email-safe HTML. От компании Resend (создатели — ex-Vercel).

🏆 Resend — Sending default

SaaS для отправки emails. Modern API, хорошая deliverability, integration с react-email. Альтернатива SendGrid/Mailgun для нового поколения. Free tier 3000 emails/месяц.

🥈 SendGrid / Postmark / Mailgun — Established sending

Старые лидеры. Зрелые APIs, надёжные. SendGrid — самый широко используемый. Postmark — хорошая deliverability специально для transactional. Используются в enterprise где Resend ещё не зрелый достаточно.

🥈 MJML — Pre-React-email standard

XML-based language для emails. Компилируется в bullet-proof HTML. Был стандартом до react-email. Использовать если команда не на React (Vue, Rails templates).

◽ Maizzle — Tailwind для emails

Email framework с Tailwind CSS. Inline styles генерируются автоматически. Альтернатива MJML для команд предпочитающих utility CSS.

◽ Loops / Customer.io — Marketing automation

Не просто sending, а full email marketing платформы. Sequences, segmentation, A/B tests. Для transactional + marketing combined.

PDF generation / viewing

Категория: Работа с PDF в браузере

Генерация PDF документов (invoices, reports, contracts) и отображение existing PDFs в UI.

PDF в вебе делится на две задачи: создание (server-side рендеринг или client-side из React) и отображение (PDF.js от Mozilla — стандарт).

Для генерации исторически было несколько подходов: HTML-to-PDF через headless Chrome (Puppeteer), PDF библиотеки на сервере (wkhtmltopdf, weasyprint), client-side libraries.

В 2017 появился react-pdf от Diego Muracciole — рендер PDF через React-like API (<Document><Page><Text>). Стал популярным для invoice/report generation. Можно как на клиенте так и на сервере. 🏆 @react-pdf/renderer — React-like API

Создание PDF из React компонентов. Отдельные элементы — Document, Page, View, Text. Может рендериться в browser или в Node. Хорошо для invoices, reports, certificates. Не для отображения existing PDFs.

🏆 PDF.js + react-pdf-viewer — Display existing PDFs

PDF.js от Mozilla — стандарт для отображения PDFs в браузере. react-pdf (этот другой react-pdf, viewer не renderer) — React wrapper. Поддерживает rendering, annotations, search inside PDF.

🥈 Puppeteer / Playwright HTML→PDF — Server-side для сложных layouts

Render HTML в headless Chrome, export в PDF. Поддерживает любой CSS включая complex layouts, web fonts, images. Server-side only. Хорошо когда нужна точная HTML→PDF копия (контракты с pixel-perfect layout).

🥈 jsPDF — Lightweight client-side

Старая (с 2009) но популярная библиотека. Низкоуровневый API — рисуете tekst, lines, images. Плохо для сложных layouts, но bundle маленький. Для простых cases (export данных) подходит.

◽ pdf-lib — Манипуляции PDF

Не для генерации с нуля, а для модификации существующих — заполнение forms, объединение files, добавление страниц. Pure JS, работает в browser и Node.

◽ Stirling PDF / Gotenberg — Self-hosted services

Self-hosted services для PDF operations. Stirling PDF — UI для PDF манипуляций. Gotenberg — API для HTML→PDF/Office→PDF conversions. Когда нужно много PDF processing на бэкенде.

Export / Print

Категория: Экспорт данных и print-friendly UI

Export таблиц в Excel/CSV, print pages с правильным layout, JSON/XML/YAML downloads.

Часто упускаемая категория но критичная для B2B продуктов — пользователи ожидают возможности export данных. Reports, invoices, audit logs — всё это нужно скачать в Excel или PDF.

Print-friendly CSS — отдельная задача. Браузер по умолчанию печатает с background colors отключенными, обрезает контент, добавляет headers/footers с URLs. CSS @media print позволяет настроить. 🏆 SheetJS / xlsx — Excel export

Стандарт для export в Excel формат (.xlsx). Поддержка formulas, формат cells, multiple sheets. Может работать на клиенте — пользователь скачивает файл без сервера. Free tier с базовыми features, Pro платный.

🏆 Papa Parse — CSV универсальный

CSV parsing и generation. Streaming для больших файлов. Web Workers support. Стандарт для CSV в JS. Для read и write.

🥈 ExcelJS — Альтернатива SheetJS

Open source, full-featured. Image embedding, conditional formatting, charts. Bundle большой (~500KB) но если нужны advanced Excel features.

🥈 react-to-print — Print specific component

Hook для printing конкретного React component без printing всей страницы. Полезно для invoices, reports внутри web app.

◽ file-saver — Утилита downloads

Один helper для programmatic file download в браузере. Cross-browser compatibility. Используется вместе с SheetJS, jsPDF и т.д.

◽ @media print CSS — Native browser print

Не библиотека, а CSS feature. Hide nav/sidebars, ensure backgrounds print, page breaks через page-break-after. Должен знать каждый senior frontend developer.

Image services / Media optimization

Категория: Image transformation and CDN

On-the-fly resize, format conversion, optimization, delivery через CDN. Альтернатива хранению нескольких версий вручную.

Раньше для responsive images приходилось на сервере генерировать несколько размеров (avatar-100x100, avatar-200x200, и т.д.) при upload. Это занимало место и не предусматривало все cases.

Image services делают это on-demand — клиент запрашивает /image.jpg?w=400&format=webp, сервис транформирует и кэширует. Modern format negotiation (AVIF/WebP/JPEG) на основе Accept header.

Cloudinary (2012) был первым серьёзным игроком. Imgix похожий. В 2018-2020 появились Cloudflare Images, Vercel Image Optimization (часть Next.js). Конкуренция давит цены. 🏆 Cloudinary — Most features

Самый mature, самый большой feature set. Image + video transformations, AI-powered cropping, content moderation. Дорогой на масштабе. Используется в medium-to-large компаниях.

🏆 Cloudflare Images — Best value 2026

Pricing очень competitive. Полная интеграция с Cloudflare CDN. Variants instead of URL params (более controlled). Хороший выбор если уже на Cloudflare. Активно набирает популярность.

🥈 Imgix — Developer-friendly URLs

Очень мощный URL-based API, хорошие defaults. Real-time analytics. Цена выше Cloudflare но ниже Cloudinary.

🥈 Vercel Image Optimization — Если на Vercel

Встроено в Next.js Image component. Не нужен отдельный аккаунт. Но pricing tied to Vercel bandwidth — на масштабе становится дорогой.

◽ imgproxy — Self-host

Open source, self-hosted. Single binary. Для команд которые хотят контролировать инфру или не платить за SaaS. Требует setup CDN на стороне.

◽ ImageKit — Альтернатива Cloudinary

Похож на Cloudinary но дешевле. Хорошее API, integrations с популярными фреймворками.

◽ Bunny.net Optimizer — Cheap CDN+optimization

Один из самых дешёвых вариантов. CDN + image optimization. Хороший choice для small projects.

Feature flags / Toggles

Категория: Запуск features постепенно

Включение/выключение features без redeploy. Gradual rollout (10% пользователей, потом 50%, потом 100%). Kill switch для broken features в production.

Раньше features запускали binary — deploy и сразу всем. Если что-то пошло не так — rollback (медленный, рискованный). Feature flags позволяют разделить deployment от release — деплой can wait, включение feature через flag.

Идея пришла из Facebook (early 2010s) под именем “Gatekeepers”. Концепция стала mainstream после статей о continuous deployment и canary releases. Сейчас стандарт в B2B SaaS.

LaunchDarkly (2014) — пионер коммерческого flag service. Сейчас доминирующий в enterprise. Open source альтернативы появились позже — Unleash, Flagsmith. PostHog и Statsig объединили analytics + feature flags. 🏆 PostHog Feature Flags — Default 2026

Free tier щедрый, open source self-hostable. Объединено с product analytics — можно targetить flags по user behavior segments. Очень популярно в startup’ах. JavaScript SDK + server SDKs для всех популярных languages.

🏆 LaunchDarkly — Enterprise default

Enterprise leader. Granular targeting, audit logs, role-based access, SOC 2. Дорого ($500+/месяц). Используется в Atlassian, Microsoft, многих больших B2B.

🥈 Statsig — A/B testing focused

Не только flags, но и продвинутый A/B testing с statistical significance calculations. Free tier до 1M events/месяц. Хороший выбор когда experimentation — core part product process.

🥈 Unleash — Open source self-host

Open source, можно self-host бесплатно. Free hosted tier тоже есть. Хорошая альтернатива LaunchDarkly когда не хочется платить, но enterprise features (SSO, audit logs) нужны.

◽ Flagsmith — Open source альтернатива

Open source, self-hostable. Multi-environment support. Конкурент Unleash. Активно разрабатывается.

◽ GrowthBook — A/B testing + flags open source

Open source альтернатива Statsig. Статистические методы для proper experimentation. Self-host или managed.

◽ @vercel/flags — Если на Vercel

Встроено в Vercel deployment. Edge-evaluated flags — ноль overhead на response time. Простой API. Без advanced targeting, для таких случаев берут PostHog/LaunchDarkly.

A/B testing / Experimentation

Категория: Контролируемые эксперименты

Сравнение двух версий feature на реальных пользователях со статистическим анализом. Не просто feature flags, а измерение impact.

A/B testing давно существует в маркетинге. В web — Google Optimize (2017-2023, deprecated) был популярен. В 2023 Google закрыл Optimize, освободив рынок.

Хорошее A/B testing требует statistical rigor — sample size calculation, confidence intervals, multiple variant testing (A/B/C/D), guardrail metrics (что не должно ухудшаться). Это сложнее чем “показать 50% пользователям версию B”. 🏆 Statsig — Default для serious experimentation

От ex-Facebook engineers. Внутри как у Meta делается A/B testing. Sequential testing для early stopping, CUPED для variance reduction, holdout groups. Free tier до 1M events.

🏆 PostHog Experiments — Если уже PostHog

Если уже используете PostHog для analytics — experiments встроены. Хорошая интеграция с feature flags и event tracking.

🥈 GrowthBook — Open source

Open source, self-hostable. Bayesian and frequentist statistics. Имеет visual editor для simple experiments. Хорошая альтернатива Statsig для команд предпочитающих open source.

🥈 VWO / Optimizely — Marketing-focused

Старые leaders. Visual editors для не-разработчиков. Дорогие. Используются в e-commerce и marketing-heavy продуктах.

◽ Convert / AB Tasty — Visual editors

Альтернативы VWO с похожим подходом. Visual editing experiments без deploy.

API mocking (MSW)

Категория: Mocking HTTP requests для разработки и тестирования

Когда backend ещё не готов, или нужны predictable responses в тестах, или хочется работать оффлайн.

Раньше mocking делали через monkey-patching fetch/axios — переопределяли в test setup. Это работало но имело проблемы — не всё работало одинаково (axios vs fetch требуют разных моков), e2e tests требовали отдельного подхода.

В 2018 появился MSW (Mock Service Worker) — революционная идея. Использовать Service Worker чтобы перехватывать любые HTTP запросы (fetch, axios, anything) на network уровне. Mock работает одинаково в Jest, Vitest, Playwright, в реальном browser dev mode.

К 2024 MSW стал industry standard. Storybook integrate его как стандартный аддон. Большинство modern test setups используют MSW. 🏆 MSW (Mock Service Worker) — Default 2026

Перехватывает запросы на network уровне. Работает везде — unit tests, integration tests, e2e, dev mode в browser. Decoupled от HTTP library — fetch, axios, ky всё работает. Можно использовать как dev backend пока real backend в разработке.

🥈 Mirage JS — Mock backend в browser

Сложнее MSW — целый mock backend с models, factories, serializers. Если приложение требует stateful mock (CRUD operations с in-memory database) — Mirage хороший выбор.

🥈 Hono / itty-router as mock — Real-like backend

Иногда написать настоящий мини-backend проще чем mocking. Hono на Bun или Cloudflare Workers — за минуты можно поднять realistic backend для разработки.

◽ json-server — Quick REST mock

Simplest вариант — JSON файл превращается в REST API. Для prototype / proof of concept.

⚠️ nock / fetch-mock — Legacy approach

Старый стандарт. Per-library specific (nock for fetch, fetch-mock for fetch, etc). MSW лучше потому что universal.

Visual regression testing

Категория: Автоматическое выявление визуальных багов

Сравнение скриншотов компонентов до и после изменений. Catches CSS regressions, layout breaks, unintended dark mode issues.

Code refactoring может незаметно сломать UI. Unit tests проверяют логику но не визуал. E2E tests медленные. Visual regression — снимаем screenshots, сравниваем с baseline, fail если diff больше threshold.

Раньше делали через Selenium screenshots + ImageMagick. Сложно. Percy (2015), Chromatic (2018) сделали это user-friendly. Chromatic интегрирован со Storybook что сделало adoption массовым. 🏆 Chromatic — Storybook + visual testing

От maintainers Storybook. Каждый Storybook story автоматически становится visual test. Smart cross-browser testing, ignore regions, hover states. Free tier до 5000 snapshots/месяц.

🏆 Playwright Visual Comparisons — Если уже Playwright

Встроено в Playwright. expect(page).toHaveScreenshot() — comparison встроен. Нет cloud service — screenshots в git репо. Бесплатно, но требует self-management baselines.

🥈 Percy — Старый лидер

Был ранним лидером. Куплен BrowserStack в 2020. Cross-browser, responsive testing. Дороже Chromatic.

◽ Lost Pixel / Argos — Open source альтернативы

Open source self-hosted альтернативы Chromatic. Lost Pixel более активно разрабатывается. Argos тоже хорош.

◽ Storybook Test Runner — Запуск Storybook stories как tests

Не visual regression сам по себе, но позволяет запускать Storybook stories через Jest/Playwright. Можно сочетать с visual comparisons.

Keyboard shortcuts / Hotkeys

Категория: Глобальные keyboard shortcuts

Cmd+K, Ctrl+S, Esc, J/K navigation. Power users хотят работать без мышки.

Native keydown events работают, но писать менеджмент глобальных shortcuts руками — занудно. Conflicts (Cmd+K в одном компоненте, Ctrl+K в другом), platform differences (Cmd на Mac, Ctrl на Windows), modifier combinations.

Раньше использовали Mousetrap (2013) — старый стандарт. В 2020-2023 React-first решения вытеснили — react-hotkeys-hook стал популярным. 🏆 react-hotkeys-hook — Default

Hook-based API. useHotkeys('cmd+k', callback). Cross-platform автоматически (cmd на Mac, ctrl на Windows). Scoped hotkeys для разных частей UI. Стандарт 2024-2026.

🥈 tinykeys — Минимальный, framework-agnostic

~500 байт. Pure JS, работает в любом фреймворке. Подходит когда не нужны React-specific features.

⚠️ Mousetrap — Legacy

Старый стандарт. Не активно разрабатывается. Не cross-platform автоматически. Для новых проектов нет.

tRPC (end-to-end type safety)

Категория: Type-safe RPC между frontend и backend

Альтернатива REST/GraphQL для full-stack TypeScript. Backend functions автоматически typed на frontend без codegen.

Проблема REST/GraphQL — типы не shared между backend и frontend. GraphQL решает через codegen из schema. Это работает но требует build steps, codegen может быть out of sync.

tRPC (2021, от Alex Johansson) — гениальная идея. Если backend и frontend в одном TS monorepo — можно прямо импортировать backend types на frontend. Никаких schemas, codegen, manual types.

На client tRPC превращается в TanStack Query queries автоматически. На server — обычные TypeScript functions с Zod validation. Каждый параметр и return value типизированы.

К 2024 стал стандартом для new full-stack TypeScript проектов в стартапах. Ограничение — требует TS на backend и monorepo (или published types package). 🏆 tRPC v11 — Default для full-stack TS

End-to-end type safety без codegen. Integration с TanStack Query на client, любой Node framework на server (Express, Fastify, Next.js API routes, Hono). Subscriptions через WebSocket. Активно разрабатывается.

🥈 Hono RPC — Если уже Hono

Hono имеет встроенный RPC mode — types Hono routes автоматически expose на client. Похоже на tRPC но более tightly coupled с Hono. Используется в Cloudflare Workers проектах.

🥈 Server Actions (Next.js) — Build-in для Next.js

Не RPC library, но похожая идея — пишете async function с 'use server', вызываете её прямо из client component. Types автоматически. Только в Next.js. Не покрывает все use cases tRPC (нет subscriptions, hard для realtime).

◽ ts-rest — REST с TS contracts

Альтернативный подход — определяете contracts (схема endpoints) в shared TS файле. Сервер и клиент используют один contract. Подходит когда нужен real REST API (для third-party consumers) но с type safety.

Push notifications / Realtime services

Категория: WebSocket / pub-sub managed services

Когда нужен realtime но не хочется поднимать свой WebSocket сервер. Chat, live counters, notifications, presence.

Self-hosted WebSocket сервер требует scaling expertise — connection limits, sticky sessions, broadcasting между nodes. Managed services закрывают это за вас.

Pusher (2010) был первым popular managed pub-sub service. Ably (2012) добавил больше features — message ordering, history, multi-region. В 2020-2024 появилось новое поколение: PartyKit, Liveblocks, Soketi (open source Pusher). 🏆 Ably — Enterprise default

Premium managed pub-sub. Message history, ordering guarantees, multi-region replication. Хороший SDK в JS, integration с TanStack Query. Дорогой но reliable. Используется в financial и enterprise.

🏆 Pusher — Original cheap option

Старый pub-sub service. Простой API. Дешевле Ably. Хорош для chat, notifications в startup’ах.

🥈 PartyKit — Edge realtime на Cloudflare

Acquired Cloudflare в 2024. Realtime на Cloudflare Workers + Durable Objects. Очень cheap на масштабе. Для multiplayer features, presence, custom realtime logic.

🥈 Supabase Realtime — Если уже Supabase

Subscribe на изменения Postgres tables через WebSocket. Хорошо когда realtime tightly coupled с DB changes. Broadcast и Presence APIs тоже.

🥈 Socket.io — Self-host classic

Самый популярный self-host WebSocket lib. Автоматический fallback на HTTP long-polling, rooms, namespaces. Используется когда хочется контролировать backend.

◽ Soketi — Self-host Pusher-compatible

Open source, drop-in replacement для Pusher. Использует Pusher protocol. Для self-hosting Pusher без cost.

◽ Convex — Reactive backend

Не классический pub-sub, но dataflow реактивный — query subscribed на data автоматически updates когда data меняется. Хорош для realtime UI без manual subscriptions.

◽ Web Push (browser API) — Push notifications нативные

Native browser API + Service Worker для push notifications когда tab закрыт. Бесплатно. Используется через VAPID keys. Часто комбинируется с FCM (Firebase Cloud Messaging) или OneSignal как backend для рассылки.

Date / Color / Time pickers

Категория: Specialized input UIs

Standalone компоненты для выбора дат, цветов, времени. Часто нужны вне existing UI kit или для замены ограниченных в нём.

Native <input type="date"> работает но ограничен — нельзя кастомизировать UI, на mobile открывается native picker (которого может не быть в design). Native <input type="color"> примитивный.

Специализированные библиотеки решают эти проблемы — controlled UI, custom styling, range selection, time included.

Date pickers

🏆 react-day-picker — Default

Headless date picker. Отлично кастомизируется. Используется в shadcn/ui Calendar. Range selection, multiple selection, custom modifiers.

🥈 React DatePicker (Hacker0x01) — Самый используемый

Самая популярная по downloads. Готовые styles из коробки. Менее кастомизируется чем react-day-picker.

🥈 react-aria DatePicker — A11y перфекционисты

От Adobe. Самый accessible — keyboard navigation, screen readers, internationalization. Сложнее в setup но best-in-class a11y.

Color pickers

🏆 react-colorful — Default

Tiny (~3KB), beautiful default UI. HEX, RGB, HSL, alpha. TypeScript. Активно maintained.

🥈 react-color — Many variants

Большой выбор UI variants (Sketch, Photoshop, Material). Старее, не активно maintained. Bundle больше.

Time pickers

◽ react-time-picker — Standalone time

Только time без date. Часто комбинируется с date picker для отдельного выбора времени.

Embedded code playgrounds

Категория: Live code editors в документации

Когда нужно показать рабочий код пользователю с возможностью изменить и сразу видеть результат. Документация React, tutorials, examples.

Раньше для live demos использовали CodeSandbox/Stackblitz iframes. Это работало но было heavy и зависело от external services. В 2021 CodeSandbox открыл Sandpack — npm пакет с их движком, можно встраивать в свой сайт.

Stackblitz сделал WebContainers — actual Node.js running в браузере через WebAssembly. Используется на докуме React, Astro, многих фреймворков. 🏆 Sandpack (от CodeSandbox) — Default для docs

Встраиваемый Codesandbox. Pre-built React templates. Customizable UI. Используется в shadcn/ui docs, многих React-related сайтах. Free.

🏆 Stackblitz WebContainers — Полноценный Node в браузере

Actual Node.js running в браузере через WASM. Можно запустить любой npm пакет, любой framework. Используется в React docs, Astro docs, Tutorial.js. Heavier чем Sandpack но мощнее.

🥈 Monaco Editor + react-runner — DIY

Если нужен только React preview без full Node.js — Monaco для editing + react-runner для evaluating React code. Для специфических use cases где Sandpack overkill.

Observability (продвинутый monitoring)

Категория: Distributed tracing, structured logging, metrics

Не просто errors (Sentry) и analytics (PostHog), а full visibility во что происходит — request flow через services, performance bottlenecks, business metrics correlation.

Sentry хорош для errors, PostHog для product analytics. Но для полной observability нужны три pillars: logs (что произошло), metrics (как часто, насколько быстро), traces (request flow через сервисы).

В backend-мире давно стандарт — Datadog, New Relic, Honeycomb. Frontend долгое время был “second-class citizen”. В 2023-2024 frontend observability стал серьёзной категорией — Real User Monitoring (RUM) появился у всех major vendors.

OpenTelemetry (объединение OpenTracing и OpenCensus) — vendor-agnostic стандарт для сбора и export данных. Позволяет менять backend без переписывания кода. 🏆 Sentry (с Performance + Replay) — Most-used frontend observability

Errors + Performance traces + Session Replay в одном tool. Стал стандартом de-facto. Хорошо integrated с frontend frameworks. Free tier до 5K errors/месяц.

🏆 Datadog RUM — Enterprise full stack

Если уже Datadog для backend — добавить RUM logical. Connecting frontend traces с backend traces — главное преимущество. Дорогой.

🥈 Grafana Faro — Open source frontend RUM

Open source RUM от Grafana Labs. Logs + traces + metrics. Self-host или Grafana Cloud. Альтернатива commercial решениям.

🥈 Honeycomb — High-cardinality observability

Известна за работу с high-cardinality data. Хороша для query-driven debugging — “покажи мне все запросы где userId=X и status=500 за последний час”. Backend-focused но и для frontend.

🥈 OpenTelemetry SDK — Standard для трасс

Сам по себе не observability platform, а способ собрать и export данные. Совместим с Datadog, Honeycomb, Grafana и другими backends. Используется для vendor-agnosticism.

◽ Bugsink / Highlight.io — Open source альтернативы Sentry

Self-host Sentry-like solutions. Bugsink — лёгкий, focus on errors. Highlight — full session replay включая network requests.

◽ Logflare — Cheap structured logging

Specialized для structured logs. От создателей Supabase. Очень cheap на масштабе.

Auth — расширенный список

Категория: Authentication providers (extended list)

К существующему разделу добавлены WorkOS, Lucia, Kinde, Stack Auth — для специфических use cases.

🥈 WorkOS — Enterprise SSO специально

Specialized для enterprise — SAML SSO, SCIM provisioning, audit logs. Когда B2B клиенты хотят интегрировать с Okta/Azure AD. Сложнее Clerk но specifically для enterprise needs.

◽ Lucia Auth — Self-host TypeScript

Open source, очень минималистичный. Сам пишете session management поверх своей БД. Для команд которым нужен полный контроль auth кода. Более deeplevel чем Auth.js.

◽ Kinde — Альтернатива Clerk

Похож на Clerk но дешевле. Готовые UI компоненты, organizations support, free tier до 10K MAU. Хороший выбор когда Clerk слишком дорогой.

◽ Stack Auth — Open source Clerk альтернатива

Молодой open source проект. Готовые React components как Clerk но self-hostable. Альтернатива для команд хотящих open source путь.

◽ Hanko Passkeys — Passkey-first auth

Specialized для passkey/WebAuthn — modern passwordless auth. Open source. Хороший выбор если product хочет быть на frontline of UX.

Testing — расширенный список

Категория: Testing utilities (extended)

К Vitest и Playwright добавлены специализированные tools.

🥈 Storybook Test Runner — Run stories as tests

Превращает каждый Storybook story в test. Smoke tests гарантируют что компоненты не падают при render. Визуальная regression через Chromatic.

🥈 Vitest Browser Mode — Real browser для unit tests

Vitest может запускать tests в реальном браузере (Chrome/Firefox через Playwright). Для тестов которые нужны real DOM (canvas, WebGL, viewport queries). Альтернатива jsdom.

◽ @testing-library/user-event — User interactions

Не сама testing library, но critical addon. userEvent.click(), userEvent.type() — симулирует реальные user interactions точнее чем fireEvent. Должна быть в любом setup с React Testing Library.

◽ Stryker (mutation testing) — Quality of tests

Mutation testing — modifies your code and runs tests. Если tests pass на mutated code — tests слабые. Для команд серьёзно относящихся к test quality.

Build tools — Bun update

Категория: Bun runtime (дополнение)

🥈 Bun (runtime + bundler + test runner) — All-in-one alternative

Не только bundler — runtime замена Node, package manager замена pnpm, test runner замена Vitest. Очень быстрый. К 2026 production-ready хотя ecosystem меньше Node. Хороший выбор для backend (Hono apps на Bun). На frontend — bun-build растёт но Vite всё ещё default.

Типовые стеки 2026

Не каждый проект собирает всё из каждой категории. Вот несколько типовых комбинаций которые имеет смысл рассматривать целиком.

SaaS dashboard / admin panel (CRUD-style, не realtime)

• Meta — Next.js + Turbopack, TypeScript strict, Tailwind v4

• UI — shadcn/ui (Radix + Tailwind), Lucide icons, Sonner toasts

• State — Zustand (client) + TanStack Query (server)

• Forms — React Hook Form + Zod

• Data — TanStack Table, Recharts для простых графиков

• Auth — Clerk или Better Auth

• Testing — Vitest + RTL, Playwright для E2E

• Monitor — Sentry + PostHog

Consumer landing / content сайт

• Meta — Astro (islands architecture), Tailwind v4

• UI — shadcn-like copy-paste compoents только для interactive islands

• Anim — Motion для React-частей, GSAP для heavy effects

• Monitor — Plausible / Fathom (privacy-first)

Collaborative editor (Notion-like)

• Meta — Vite + TanStack Router или Next.js

• Editor — TipTap + Yjs collaboration extension

• Sync — y-websocket на своём сервере или Liveblocks managed

• State — Jotai (atomic хорош для granular updates), TanStack Query

Interactive data tool / admin

• Meta — Vite + React Router

• UI — Mantine или Ant Design — быстрый старт со сложными компонентами

• Data — AG Grid для data grids, visx для кастомных визуализаций

• State — Zustand + TanStack Query, либо MobX для OOP-heavy доменной модели

Realtime dashboard с WebSocket (Bloomberg-like, Datadog-like)

Особый случай: TanStack Query не подходит, потому что данные не fetched, а pushed через WebSocket. Сложная domain model с связями (Source ↔ Stream ↔ Event ↔ Channel). Много derived state (computed values на основе live data). MobX — natural fit.

• Meta — Vite + React Router, TypeScript (Next.js не нужен — нет SEO, всё за auth)

• Realtime — WebSocket нативный + custom reconnection, WebRTC для видео-стримов

• State — MobX для всего — domain models с computed свойствами, granular re-renders без selectors. TanStack Query не нужен.

• UI — react-grid-layout для drag&drop виджетов, visx для кастомных timeline графиков, Recharts для типовых

• Media — Vidstack или Media Chrome для кастомного видео-плеера, hls.js для streaming

Streaming / video consumer app (YouTube-like)

Это другой кейс: REST API для metadata, рекомендаций; WebSocket только для chat/comments. TanStack Query логичен.

• Meta — Next.js — SEO критичен, video pages должны индексироваться

• Media — Vidstack или Media Chrome, hls.js для adaptive bitrate

• State — TanStack Query (server data) + Zustand (player UI state)

Как этим пользоваться

Не выбирайте “модное”, выбирайте подходящее для задачи. Три вопроса перед каждой категорией:

1. Нужна ли эта категория вообще? Часто нативные API достаточны (dates — Intl.DateTimeFormat для форматирования, basic fetch вместо TanStack Query для одиночного запроса).

2. Нужен ли победитель или хватит runner-up? Если вы делаете прототип — Formik вместо RHF ок. Если production — берите проверенное победителем.

3. Есть ли уже похожее в проекте? Если есть MobX — добавлять Zustand нелогично. Если есть Mantine — не тащить shadcn.

Экосистема быстро меняется, но базовая архитектура остаётся: framework + build + state + UI + forms + data + testing. Эти слои стабильны, меняются только конкретные имена внутри них.