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

alpinejs/alpine

Минималистичный и надёжный JavaScript-фреймворк для добавления реактивного поведения прямо в HTML-разметку.

Открыть на GitHubСайт
Звёзды
31,984
Форки
1,396
Открытые issues
25
Последний коммит
4 дня назад

Что это?

Alpine.js — минималистичный JavaScript-фреймворк для создания интерактивного поведения прямо в HTML. Разработчики задают состояние и обработчики событий с помощью атрибутов элементов. Поэтому небольшие интерактивные компоненты — например, выпадающие списки, модальные окна, вкладки и логика форм — могут располагаться рядом с разметкой, к которой они относятся, без отдельной громоздкой структуры приложения со сборкой.

Проект доступен в виде CDN-скрипта, который можно подключить одним тегом script, или как npm-модуль для проектов со сборкой. Основной пакет дополняют официальные плагины: для анимации сворачивания элементов, управления фокусом, привязки состояния к строке запроса, запуска действий при пересечении элементов, маскирования ввода, морфинга DOM и сохранения состояния между загрузками страницы.

Репозиторий представляет собой монорепозиторий под управлением npm workspaces. В нём находятся основной пакет, отдельные плагины, сборка с поддержкой CSP и сайт документации. Все пакеты можно собрать одной командой, а интеграционные тесты запускаются через Cypress, модульные — через Vitest.

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

  • 01Декларативное задание состояния и обработчиков событий прямо в HTML-атрибутах.
  • 02Доступен в виде CDN-скрипта или npm-модуля.
  • 03Официальные плагины для анимации сворачивания, управления фокусом, маскирования ввода, сохранения состояния и морфинга DOM.
  • 04Вариант сборки с поддержкой CSP для сред со строгими политиками безопасности контента.
  • 05Монорепозиторий с наборами тестов для Cypress и Vitest.

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

  • Добавление выпадающих списков, модальных окон или вкладок на страницу с серверным рендерингом без полноценного SPA-фреймворка.
  • Сохранение состояния интерфейса — например, открытых панелей или значений форм — между загрузками страницы.
  • Создание интерактивных форм с маскированием ввода и управлением фокусом.
  • Работа в средах, где требуется сборка JavaScript с поддержкой CSP.

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

  1. 1

    Клонируйте репозиторий локально

  2. 2

    Установите зависимости

    npm install
  3. 3

    Соберите все пакеты

    npm run build
  4. 4

    Добавьте собранный файл cdn.js в тег script на своей странице

Что важно знать

  • Этот репозиторий предназначен для участия в разработке; большая часть документации по использованию находится на внешнем сайте документации Alpine.

Темы

#javascript#frontend#html#reactive#ui-framework#declarative#lightweight

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

Что такое alpine?
Минималистичный и надёжный JavaScript-фреймворк для добавления реактивного поведения прямо в HTML-разметку. Alpine.js — минималистичный JavaScript-фреймворк для создания интерактивного поведения прямо в HTML. Разработчики задают состояние и обработчики событий с помощью атрибутов элементов. Поэтому небольшие интерактивные компоненты — например, выпадающие списки, модальные окна, вкладки и логика форм — могут располагаться рядом с разметкой, к которой они относятся, без отдельной громоздкой структуры приложения со сборкой.
alpine можно использовать бесплатно? Какая у него лицензия?
alpine распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
alpine всё ещё поддерживается?
Активно поддерживается. Последний коммит в alpine — 16 окт. 2026 г..
Для чего можно использовать alpine?
Добавление выпадающих списков, модальных окон или вкладок на страницу с серверным рендерингом без полноценного SPA-фреймворка. Сохранение состояния интерфейса — например, открытых панелей или значений форм — между загрузками страницы. Создание интерактивных форм с маскированием ввода и управлением фокусом. Работа в средах, где требуется сборка JavaScript с поддержкой CSP.
Как установить alpine?
Клонируйте репозиторий локально Установите зависимости: npm install Соберите все пакеты: npm run build Добавьте собранный файл cdn.js в тег script на своей странице
Где скачать alpine?
Исходный код и инструкции по установке — на GitHub: https://github.com/alpinejs/alpine

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

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