Методология

1. Архитектура редактора

Рабочая область использует три текстовых редактора для HTML, CSS и JavaScript с полями номеров строк, обработкой отступов табуляцией, управлением размером шрифта и необязательным переносом строк.

2. Обработка HTML

HTML из панели HTML помещается в body сгенерированного документа. Инструмент не выполняет HTML как UI родительской страницы.

3. Внедрение CSS

CSS вставляется в элемент style в head сгенерированного документа, чтобы правила применялись только к документу предпросмотра.

4. Выполнение JavaScript

JavaScript помещается в элемент script внутри документа предпросмотра. Он выполняется в контексте просмотра iframe после Run.

5. Рендеринг iframe

Объединённый документ присваивается iframe.srcdoc, что создаёт новый документ предпросмотра без навигации родительской страницы.

6. Изоляция sandbox

iframe использует атрибут sandbox (скрипты разрешены для предпросмотра). Родительские DOM API не предоставляются для выполнения пользовательского кода.

7. Обработка консоли

Небольшой мост внутри предпросмотра пересылает console.log/info/warn/error и ошибки выполнения родителю через postMessage для отображения.

8. API браузера

Возможности скриптов зависят от политики браузера и разрешений sandbox. Некоторые API ведут себя в iframe иначе, чем на страницах верхнего уровня.

9. Локальное хранилище

Состояние редактора может записываться в ключи localStorage, ограниченные этим источником, чтобы обновление не удаляло незавершённую работу.

10. Ограничения

Нет серверной компиляции для стандартного HTML/CSS/JS. Сложные сборочные конвейеры, частные пакеты и привилегированные API устройств не входят в область применения.

11. Вопросы конфиденциальности

Сборка предпросмотра выполняется на стороне клиента. Локальное сохранение остаётся в браузере, если вы не экспортируете или не копируете содержимое в другое место.