Codestin Search App

Если вы ведете технический блог, пишете документацию к базе данных или создаете обучающие курсы по 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).

Если вы хотите получить лицензионный ключ или индивидуальное предложение под ваш объем трафика, пишите нам на [email protected].

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

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

👉 SQLize Embed Showcase

---

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

#sql #database #webdev #обучение #программирование #mysql #postgresql #sqlize