INTERACTIVE LAB

Не только исходники.

Проверьте каждую библиотеку в действии. Все примеры загружают файлы с этого же хостинга.

К библиотекам

DOM Kit

create() · on()

Создание элементов без innerHTML. Клик добавит новый узел в контейнер.

Здесь появятся DOM-элементы

StaticDOM.create('span', { text: 'Node' })

Fetch Kit

get() · timeout

Настоящий GET к v1/health.json. Ошибки HTTP и таймауты видны в ответе.

Нажмите «Получить JSON».

await StaticFetch.get(url, { timeout: 5000 })

Tiny Store

set() · get() · remove()

Сохраните значение и перезагрузите страницу. Используется только namespace demo.

Тестовое значениеНет сохранённого значения

StaticStore.create('demo').set('value', input)

Event Bus

on() · emit() · off()

Каждое событие увеличивает счётчик подписчика. Отписка прекращает обновление.

0событий полученоПодписка активна

bus.emit('delivery', { ok: true })

UI Core

.sc-card · .sc-button

CSS

Карточка ниже оформлена именно файлом из /libs/ui-core/, а не стилями сайта.

UI CORE 1.1.0

Локальные стили подключены.

<button class="sc-button">Hello</button>

Motion CSS

.sc-motion · .sc-slide-up

CSS

Пять эффектов из локального CSS. Системная настройка reduced motion учитывается.

class="sc-motion sc-slide-up"

Проверка библиотек без внешних запросов.

Используются только локальные CSS/JS версии 1.1.0. При открытии через file:// браузер может заблокировать запрос Fetch Kit: откройте сайт через HTTP(S).