Оживите свой блог: Интерактивная песочница SQLize для любого сайта

Если вы ведете технический блог, пишете документацию к базе данных или создаете обучающие курсы по SQL, вы наверняка сталкивались с одной и той же проблемой: статические примеры кода скучны.

Чтобы читатель мог проверить ваш запрос, ему нужно: скопировать код, запустить локальный сервер или тяжелую IDE, развернуть схему и только потом нажать «Выполнить». Большинство просто пролистает статью дальше.

Сегодня мы представляем решение — SQLize Embed. Это легкая и отзывчивая интерактивная песочница, которую можно вставить на любой сайт за пару минут.

Что такое SQLize Embed?

SQLize Embed — это клиентская библиотека, которая превращает обычные блоки `<div>` в полноценные редакторы SQL. Ваши читатели смогут редактировать и запускать запросы к реальным базам данных прямо в браузере, не покидая страницу.

Ключевые возможности

• Поддержка 20+ движков: От классики вроде MySQL 8.0/9.3, PostgreSQL (14-18) и SQLite 3, до корпоративных гигантов MS SQL Server (2017-2025) и Oracle 23ai.
• Готовые наборы данных: Демонстрируйте сложные `JOIN` или оконные функции на популярных базах: Sakila, OpenFlights, Bookings или AdventureWorks.
• Профессиональный редактор: В основе лежит Ace Editor, обеспечивающий подсветку синтаксиса, автоотступы и привычный UX.
• Адаптивность: Песочница отлично работает как на десктопах, так и на мобильных устройствах.
• Режим «Только для чтения»: Идеально подходит для демонстрации примеров, которые можно запускать, но нельзя изменять.

Как начать работу за 30 секунд

Интеграция SQLize Embed так же проста, как вставка видео с YouTube.

1. Подключите скрипт

Добавьте этот тег перед закрывающим тегом `</body>`:

<script src="https://sqlize.online/js/sqlize-embed.js"></script>

2. Добавьте песочницу

Создайте элемент `div` с атрибутом `data-sqlize-editor`. Укажите версию СУБД и начальный код:

<div data-sqlize-editor data-sql-version="mysql80" code-rows="10">
-- Создаем таблицу
CREATE TABLE sqlize_fans (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100)
);

-- Добавляем данные
INSERT INTO sqlize_fans (username) VALUES ('pro_coder'), ('sql_ninja');

— Проверяем результат
SELECT * FROM sqlize_fans;
</div>

Настройка под себя

Вы можете управлять внешним видом и поведением редактора через HTML-атрибуты:

• data-sql-version - Версия БД (например, `psql17`, `mssql2025`, `clickhouse`)
• code-rows - Высота редактора в строках. По умолчанию: 12.
• result-rows - Высота блока с результатами. По умолчанию: 12.
• data-read-only - true, если нужно запретить редактирование кода. По умолчанию false

Использование и лицензирование

SQLize Embed — это мощный инструмент для образовательных платформ и корпоративной документации. Мы предлагаем гибкую систему лицензирования на основе подписки для каждого домена (TLD).

Если вы хотите получить лицензионный ключ или индивидуальное предложение под ваш объем трафика, пишите нам на support@sqlize.com.

Попробуйте в действии!

Посмотреть все возможности и живые примеры можно на странице документации:
👉 SQLize Embed Documentation & Demo

👉 SQLize Embed Showcase

---

Делайте свои статьи интерактивными — дайте читателям возможность не просто читать код, а чувствовать его!