---
layout: default
title: Stoolap Playground - Try Stoolap in Your Browser
description: Interactive SQL playground running Stoolap entirely in your browser via WebAssembly. No server, no installation.
---
<link rel="stylesheet" href="{{ '/assets/css/playground.css' | relative_url }}">
<section class="playground-hero">
<div class="playground-hero-bg"></div>
<div class="playground-hero-grid" aria-hidden="true"></div>
<div class="container playground-hero-inner">
<h3 class="playground-title">Stoolap <span class="blog-accent">Playground</span></h3>
<p class="playground-desc">Run real SQL queries in your browser. Stoolap compiles to WebAssembly. Everything runs locally, nothing leaves your machine.</p>
</div>
</section>
<section class="playground-section">
<div class="container">
<div class="playground-terminal" id="playground">
<div class="pg-chrome">
<span class="pg-dot" style="background:#ff5f56"></span>
<span class="pg-dot" style="background:#ffbd2e"></span>
<span class="pg-dot" style="background:#27c93f"></span>
<span class="pg-label">stoolap / Playground</span>
<div class="pg-chrome-actions">
<button class="pg-btn" id="btn-clear" title="Clear output (Ctrl+L)">Clear</button>
<button class="pg-btn" id="btn-reset" title="Reset database">Reset</button>
</div>
</div>
<div class="pg-body" id="pg-output">
<div class="pg-loading" id="pg-loading">
<div class="pg-spinner"></div>
<span>Loading Stoolap WASM…</span>
</div>
</div>
<div class="pg-input-area">
<span class="pg-prompt" id="pg-prompt">stoolap></span>
<textarea class="pg-input" id="pg-input" rows="1" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Enter SQL..." aria-label="SQL input" disabled></textarea>
</div>
<div class="playground-hints">
<div class="hint-grid">
<button class="hint-chip" data-sql="SHOW TABLES;">SHOW TABLES</button>
<button class="hint-chip" data-sql="SELECT * FROM users;">SELECT * FROM users</button>
<button class="hint-chip" data-sql="SELECT name, email, ROW_NUMBER() OVER (ORDER BY age DESC) AS rank FROM users;">Window Functions</button>
<button class="hint-chip" data-sql="SELECT u.name, COUNT(o.id) AS order_count, SUM(o.amount) AS total FROM users u JOIN orders o ON u.id = o.user_id GROUP BY u.name ORDER BY total DESC;">JOINs + Aggregation</button>
<button class="hint-chip" data-sql="SELECT category, ROUND(AVG(price), 2) AS avg_price, COUNT(*) AS count FROM products GROUP BY category HAVING COUNT(*) > 2 ORDER BY avg_price DESC;">GROUP BY + HAVING</button>
<button class="hint-chip" data-sql="WITH RECURSIVE seq(n) AS (SELECT 1 UNION ALL SELECT n+1 FROM seq WHERE n < 10) SELECT n, n*n AS square FROM seq;">Recursive CTE</button>
<button class="hint-chip" data-sql="SELECT title, category, ROUND(VEC_DISTANCE_COSINE(embedding, '[0.90, 0.15, 0.10, 0.10]'), 4) AS distance FROM documents ORDER BY distance LIMIT 5;">Vector k-NN Search</button>
<button class="hint-chip" data-sql="SELECT title, category, ROUND(VEC_DISTANCE_L2(embedding, (SELECT embedding FROM documents WHERE id = 1)), 4) AS distance FROM documents WHERE id != 1 ORDER BY distance LIMIT 3;">Find Similar Docs</button>
<button class="hint-chip" data-sql="SELECT title, category, ROUND(VEC_DISTANCE_COSINE(embedding, '[0.50, 0.50, 0.10, 0.10]'), 4) AS distance FROM documents WHERE category = 'Science' ORDER BY distance;">Hybrid Filter + Vector</button>
<button class="hint-chip" data-sql="SELECT title, category, VEC_DIMS(embedding) AS dims, ROUND(VEC_NORM(embedding), 4) AS norm, VEC_TO_TEXT(embedding) AS vector FROM documents;">Vector Info</button>
<button class="hint-chip" data-sql="SELECT title, ROUND(embedding <=> '[0.90, 0.15, 0.10, 0.10]', 4) AS l2_distance FROM documents ORDER BY l2_distance LIMIT 5;">Distance Operator <=></button>
<button class="hint-chip" data-sql="EXPLAIN SELECT title, VEC_DISTANCE_COSINE(embedding, '[0.90, 0.15, 0.10, 0.10]') AS distance FROM documents ORDER BY distance LIMIT 5;">EXPLAIN Vector</button>
</div>
</div>
</div>
</div>
</section>
<script type="module" src="{{ '/assets/js/playground.js' | relative_url }}"></script>