DEV Community

Slava Rozhnev
Slava Rozhnev

Posted on

Make Your Technical Tutorials Interactive with SQLize Embed

#sql #documentation #mariadb #postgressql

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:

  1. Copy the code.
  2. Open their local terminal or a heavy IDE.
  3. Set up a database schema.
  4. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 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! 💻

sql #database #webdev #tutorial #productivity #programming

Top comments (0)