Repolode
Предложить
storybookjs

storybookjs/storybook

Фронтенд-среда для разработки, документирования и тестирования UI-компонентов в изоляции с поддержкой React, Vue, Angular, Svelte и других технологий.

Открыть на GitHubСайт
Звёзды
91,336
Форки
10,472
Открытые issues
1,867
Последний коммит
3 часа назад

Что это?

Storybook — это фронтенд-среда, в которой разработчики создают UI-компоненты и страницы вне основного приложения. Каждый компонент отображается отдельно в изолированной среде, поэтому его можно разрабатывать, проверять и документировать, не запуская всё приложение и не переходя вручную в нужные состояния.

Поддерживается широкий набор средств рендеринга: React, Angular, Vue 3, Svelte, Web Components, HTML, Preact, Ember и SolidJS. React Native, Android, iOS и Flutter доступны в отдельных проектах. Возможности Storybook расширяются с помощью аддонов для проверок доступности, тестирования взаимодействий, настройки фонов и областей просмотра, анализа макета и автоматической генерации документации.

Проект устроен как монорепозиторий и поддерживается командой Storybook. Для участников доступны руководство по внесению изменений и каналы сообщества.

Ключевые возможности

  • 01Отображает компоненты изолированно в React, Vue, Angular, Svelte и других фреймворках.
  • 02Предоставляет аддоны для проверки доступности, переключения областей просмотра и анализа макета.
  • 03Создаёт документацию компонентов на основе историй.
  • 04Поддерживает тестирование взаимодействий внутри историй.
  • 05Расширяется через plugin API для создания пользовательских аддонов.

Сценарии использования

  • Разработка и проверка компонентов дизайн-системы без запуска всего приложения.
  • Документирование вариантов UI-компонентов для дизайнеров и разработчиков.
  • Тестирование состояний компонентов, например загрузки, ошибки и пустого экрана.
  • Проверка доступности компонентов во время разработки.

Быстрый старт

  1. 1

    Перейдите на сайт Storybook, чтобы начать (в README нет команды для установки)

  2. 2

    Используйте storybook.new, чтобы создать пример проекта в StackBlitz

Темы

#ui#components#design-systems#documentation#testing#react#vue#frontend#angular#html

Частые вопросы

Что такое storybook?
Фронтенд-среда для разработки, документирования и тестирования UI-компонентов в изоляции с поддержкой React, Vue, Angular, Svelte и других технологий. Storybook — это фронтенд-среда, в которой разработчики создают UI-компоненты и страницы вне основного приложения. Каждый компонент отображается отдельно в изолированной среде, поэтому его можно разрабатывать, проверять и документировать, не запуская всё приложение и не переходя вручную в нужные состояния.
storybook можно использовать бесплатно? Какая у него лицензия?
storybook распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
storybook всё ещё поддерживается?
Активно поддерживается. Последний коммит в storybook — 21 окт. 2026 г..
Для чего можно использовать storybook?
Разработка и проверка компонентов дизайн-системы без запуска всего приложения. Документирование вариантов UI-компонентов для дизайнеров и разработчиков. Тестирование состояний компонентов, например загрузки, ошибки и пустого экрана. Проверка доступности компонентов во время разработки.
Как установить storybook?
Перейдите на сайт Storybook, чтобы начать (в README нет команды для установки) Используйте storybook.new, чтобы создать пример проекта в StackBlitz
Где скачать storybook?
Исходный код и инструкции по установке — на GitHub: https://github.com/storybookjs/storybook

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

tabler / tabler-icons

Бесплатный набор из более чем 6 200 SVG-иконок по лицензии MIT, созданных по сетке 24×24; доступны пакеты для React, Vue, Svelte, Angular и других платформ.

Фронтенд и UI#icons#svg#icon-font
22,4 тыс.1,2 тыс.JavaScriptMITОбновлён 4 часа назад