Runno

Представьте, что ваши читатели могут не просто смотреть на примеры кода в статье, а запускать их прямо на странице. Именно это делает Runno. Это инструмент, который позволяет вставлять интерактивные сниппеты кода прямо в ваш веб-сайт.

Все настраивается довольно просто: устанавливаете npm пакет, добавляете несколько веб-компонентов в HTML — и готово. Теперь пользователи могут редактировать и тестировать код на Python, Ruby или JavaScript в режиме реального времени. Самое крутое здесь то, что всё работает прямо в браузере благодаря WebAssembly и WASI. Вам не нужен отдельный бэкенд-сервер, а пользователям не нужно ничего скачивать или устанавливать.

Технически это реализовано так: Runno загружает WebAssembly-бинарники для нужного языка и запускает их в изолированном Web Worker с файловой системой в оперативной памяти. По сути, внутри браузера создается среда, имитирующая Unix-терминал. При этом инструмент очень гибкий: внешний вид редактора и терминала можно настроить через CSS, а логику работы — с помощью JavaScript. Кстати, в основе Runno лежат проверенные open-source проекты: CodeMirror для редактирования кода и XTerm.js для терминала.

Кому это будет полезно? В первую очередь преподавателям, техписателям и разработчикам, которые создают курсы, туториалы или документацию. Runno убирает главный барьер в обучении — необходимость настраивать окружение. Теперь блогер может вставить живой пример функции на Python, а сайт с документацией — дать возможность попрактиковаться в SQL-запросах прямо на странице. Статичные примеры кода наконец-то превращаются в полноценный интерактивный опыт.