/html-playground

Data Explorer Template

Use this template when the playground is about data queries, APIs, pipelines, or structured configuration: SQL builders, API designers, regex builders, pipeline visuals, cron schedules.

Layout

+-------------------+----------------------+
|                   |                      |
|  Controls         |  Formatted output    |
|  grouped by:      |  (syntax-highlighted |
|  • Source/tables  |   code, or a         |
|  • Columns/fields |   visual diagram)    |
|  • Filters        |                      |
|  • Grouping       |                      |
|  • Ordering       |                      |
|  • Limits         |                      |
|                   +----------------------+
|                   |  Prompt output       |
|                   |  [ Copy Prompt ]     |
+-------------------+----------------------+

Control types by decision

Preview rendering

Render syntax-highlighted output using <span> tags with color classes:

function renderPreview() {
  const el = document.getElementById("preview");
  // Color-code by token type
  el.innerHTML = sql
    .replace(/\b(SELECT|FROM|WHERE|JOIN|ON|GROUP BY|ORDER BY|LIMIT)\b/g, '<span class="kw">$1</span>')
    .replace(/\b(users|orders|products)\b/g, '<span class="tbl">$1</span>')
    .replace(/'[^']*'/g, '<span class="str">$&</span>');
}

For pipeline-style playgrounds, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.

Prompt output for data

Frame it as a specification of what to build, not the raw query itself:

"Write a SQL query that joins orders to users on user_id, filters for orders after 2024-01-01 with total > $50, groups by user, and returns the top 10 users by order count."

Include the schema context (table names, column types) so the prompt is self-contained.

Example topics

• SQL query builder (tables, joins, filters, group by, order by, limit)
• API endpoint designer (routes, methods, request/response field builder)
• Data transformation pipeline (source → filter → map → aggregate → output)
• Regex builder (sample strings, match groups, live highlight)
• Cron schedule builder (visual timeline, interval, day toggles)
• GraphQL query builder (type selection, field picker, nested resolvers)