Если ведёте блоги про код, то знаете: показывать код — больно. С зависимостями показывать больнее в два раза. Читателям лениво даже скачать репо с Github, бывает и такое.
Решение — чтобы можно было тыкнуть и всё само запустилось. Можно поднять для этого свой бэкенд, но это дорого и долго. Поэтому лучше встроить чужой через iframe в свою статику. Webcontainers от Stackblitz — именно это.
Создаём проект в Stackblitz
Открываем дэшборд после регистрации и создаём новый проект. Появится окно с шаблонами, выбирайте любой. Шэрить будем этот проект.
Создаём iframe
Нажимаем «поделиться» и переходим во вкладку Embed. Нам нужен Embed URL.
Сбоку — настройки, я рекомендую поставить Click to load и Hide preview URL. Снизу — превью. Сейчас оно не работает, раньше там можно было увидеть iframe.
Выбираем дефолтный файл сверху.
Встраиваем на страницу
Эта страница написана на markdown, но встраивать я буду через HTML.
<iframe
width="100%"
height="256px"
title="Stackblitz Iframe"
src="Ваш URL"></iframe>