Как запустить macOS в браузере и зачем это нужно разработчику

Всегда мечтал о MacBook, но кошелек шептал обратное? Автор проекта macos-web Пуру Виджай решил эту проблему радикально. Он не стал копить деньги, а просто взял и переписал интерфейс macOS Ventura на Svelte. Результат получился настолько правдоподобным, что через пару минут работы в браузере забываешь, что это обычная веб-страница.

Интересно, что проект вырос из чистого любопытства и фанатского отношения к дизайну Apple. Пуру признается, что никогда не владел «маком», и это вдохновило его воссоздать эстетику системы в вебе. Раньше проект жил на Preact, но автор переписал всё на Svelte, чтобы добиться еще большей плавности и легкости кода.

Что внутри этой песочницы

Проект не пытается стать полноценной операционкой, это именно имитация интерфейса. Но имитация чертовски качественная. Когда заходишь на демо-сайт, тебя встречает знакомый экран блокировки, а после «логина» — рабочий стол с доком, верхним меню и виджетами.

Здесь работают базовые вещи, которые мы привыкли видеть в macOS:

• Настоящий многооконный интерфейс. Окна можно перетаскивать, сворачивать и менять их размер.
• Центр управления. Можно пощелкать переключателями Wi-Fi, Bluetooth или изменить яркость экрана (правда, это просто CSS-фильтр поверх страницы).
• Интерактивный Dock. Иконки увеличиваются при наведении, прямо как в оригинале.
• Системные приложения. Есть калькулятор, календарь и даже упрощенная версия Safari.

Технологический стек без прикрас

Автор выбрал довольно минималистичный набор инструментов. Никаких тяжелых библиотек компонентов вроде MUI или Tailwind.

• Svelte — основной фреймворк. Выбор логичный: отсутствие виртуального DOM помогает интерфейсу оставаться отзывчивым даже при куче открытых окон.
• Vite — для сборки. Сейчас это стандарт индустрии, который обеспечивает моментальную перезагрузку при разработке.
• SCSS — для стилизации. Весь визуал macOS, все эти градиенты, блюры и тени прописаны вручную на чистом CSS/SCSS.

В репозитории нет готовых UI-китов. Это значит, что каждый элемент управления, каждая кнопка и ползунок создавались с нуля. Для тех, кто хочет поучиться верстке сложных интерфейсов, это просто кладезь примеров.

Кому и зачем это может пригодиться

На первый взгляд кажется, что это просто красивая игрушка для портфолио. Но если копнуть глубже, у проекта есть вполне практические кейсы.

Во-первых, это отличный учебник по Svelte. Если вы привыкли к React и хотите посмотреть, как на Svelte реализуются сложные стейты (например, управление активными окнами или глобальные настройки системы), код Пуру даст отличные подсказки.

Во-вторых, архитектура проекта показывает, как организовать Desktop-like опыт в браузере. Если вам прилетит задача сделать сложную админку с окнами и виджетами, macos-web станет готовым чертежом.

В-третьих, это просто чертовски хороший пример того, как один разработчик может воссоздать сложнейший UI, используя только открытые инструменты и свое упорство.

Стоит ли лезть в код

Если вы ждете готовую библиотеку, которую можно подключить одной строчкой через npm — это не тот случай. Проект монолитный и заточен именно под воспроизведение macOS.

Однако заглянуть в репозиторий точно стоит ради реализации Drag-and-Drop и системы управления слоями (z-index). Там это сделано элегантно. Проект открыт для контрибьюторов: автор честно пишет, что не знает, когда проект будет полностью готов, и приглашает всех желающих фиксить баги или предлагать свои фичи.

Попробовать систему в деле можно по ссылке macos-web.app. Предупреждаю: можно залипнуть на полчаса, просто перетаскивая окошки.