If you’ve ever written a SQL tutorial or database documentation, you know the struggle. You provide a beautiful code snippet, but for your readers to actually see it in action, they have to:
- Copy the code.
- Open their local terminal or a heavy IDE.
- Set up a database schema.
- Run the code.
Most readers won’t do it. They just keep scrolling.
Today, I’m excited to introduce SQLize Embed—a lightweight, responsive, and powerful way to embed live SQL sandboxes directly into your blog, documentation, or educational site.
What is SQLize Embed?
SQLize Embed is a client-side library that transforms static <div> elements into fully functional SQL editors. Powered by the SQLize.online engine, it allows users to write and execute SQL against …
If you’ve ever written a SQL tutorial or database documentation, you know the struggle. You provide a beautiful code snippet, but for your readers to actually see it in action, they have to:
- Copy the code.
- Open their local terminal or a heavy IDE.
- Set up a database schema.
- Run the code.
Most readers won’t do it. They just keep scrolling.
Today, I’m excited to introduce SQLize Embed—a lightweight, responsive, and powerful way to embed live SQL sandboxes directly into your blog, documentation, or educational site.
What is SQLize Embed?
SQLize Embed is a client-side library that transforms static <div> elements into fully functional SQL editors. Powered by the SQLize.online engine, it allows users to write and execute SQL against real database instances without leaving your page.
Key Features
- 20+ Database Engines: Supports everything from the classics like MySQL 8.0/9.3, PostgreSQL (14-18), and SQLite 3, to enterprise giants like MS SQL Server (2017-2025) and Oracle 23ai.
- Ready-to-Use Datasets: Want to demo a JOIN? Use preloaded databases like Sakila (MySQL/MariaDB), OpenFlights, or AdventureWorks (MS SQL).
- Modern Editor Experience: Powered by the Ace Editor, providing syntax highlighting, auto-indentation, and a professional coding feel.
- Responsive & Lightweight: Works seamlessly on mobile and desktop.
- Read-Only Mode: Perfect for strictly showing examples that you want users to run but not modify.
Getting Started in 30 Seconds
Adding a live SQL sandbox to your site is as easy as adding a YouTube video.
1. Include the Script
Add this script tag to your site’s <head> or before the closing </body> tag:
<script src="https://sqlize.online/js/sqlize-embed.js"></script>
2. Add Your Sandbox
Create a div with the data-sqlize-editor attribute. Specify your preferred database version and initial code:
<div data-sqlize-editor data-sql-version="mysql80" code-rows="10">
-- Create a sample table
CREATE TABLE dev_to_fans (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(100)
);
-- Insert data
INSERT INTO dev_to_fans (username) VALUES ('awesome_dev'), ('sql_ninja');
-- Run it!
SELECT * FROM dev_to_fans;
</div>
Advanced Configuration
You can customize the appearance and behavior of the sandbox using simple HTML attributes:
| Attribute | Description | Default |
|---|---|---|
data-sql-version | The DB engine (e.g., psql17, mssql2025, clickhouse) | mysql80 |
code-rows | The height of the editor in lines | 12 |
result-rows | The height of the result area | 12 |
data-read-only | Set to true to disable editing | false |
Use Cases
- Interactive Learning: Build a "SQL 101" course where users solve challenges directly in the browser.
- Documentation: Stop using screenshots of tables. Let users run
DESCRIBE tablethemselves. - Technical Blogs: Show off complex PostgreSQL window functions or the new MariaDB Vector types with live examples.
Try the Live Demo
Check out the live documentation and various examples here: 👉 SQLize Embed Documentation
👉 SQLize Embed Showcase
Join the Community!
We are constantly adding support for new database versions (we already have MS SQL Server 2025!). If you have a specific database or dataset you’d like to see, let us know in the comments!
Happy coding! 💻