Make Your Technical Tutorials Interactive with SQLize Embed

Source: Dev.to

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 “ 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 or before the closing tag:

<!-- Insert the SQLize Embed script here -->

2. Add Your Sandbox

Create a div with the data-sqlize-editor attribute. Specify your preferred database version and initial code:

-- 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;

Advanced Configuration

You can customize the appearance and behavior of the sandbox using simple HTML attributes:

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 table themselves.
• 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! 💻

Tags: sql database webdev tutorial productivity programming