Azure Cosmos DB Playground: Learn and experiment with queries in your browser

Source: Dev.to

Interactive Browser-Based Environment to Learn, Test, and Share Queries

The Azure Cosmos DB Playground is an interactive, browser‑based tool for learning and experimenting with Azure Cosmos DB SQL queries—no setup, installation, or cloud costs required. It runs on the Azure Cosmos DB vNext emulator and uses the open‑source codapi project behind the scenes.

The playground is ideal for:

• Exploring pre‑loaded datasets and ready‑to‑run query examples
• Pasting or uploading your own JSON data to test custom scenarios
• Seeing query results instantly and modifying data or queries on the fly
• Generating shareable links that capture the current dataset and query
• Restoring your last session automatically after a page refresh
• Embedding interactive, runnable examples into HTML files for documentation, blogs, or tutorials

Note: This is an experimental project, not an official Microsoft or Azure offering. It is intended for learning and sharing, not for production use.

Quick Demo

▶️ Play the demo

Getting Started

Visit the hosted playground and start experimenting right away:

Deploy Your Own Instance

You can run the playground on Azure or locally using Docker Compose. The project is fully containerized; follow the deployment instructions in the GitHub repository to set up your own instance.

• HTTP(s) access configuration: see the GitHub instructions for enabling secure access.

Playground Features

• Pre‑loaded datasets with example queries
• Upload or paste custom JSON data
• Instant result display and live editing
• Shareable URLs that preserve state
• Automatic session restoration
• Embeddable interactive examples

Features may evolve—check the GitHub repository for the latest list.

Architecture Overview

+-------------------+        +-------------------+        +-------------------+
|   User Browser    |   |      nginx        |   |     Codapi        |
| (playground.html) |        | (Reverse Proxy)   |        | (Sandbox Server)  |
+-------------------+        +-------------------+        +-------------------+
                                                            |
                                                            v
                                                +--------------------------+
                                                |  Ephemeral Query Container|
                                                |  (Python + Cosmos SDK)    |
                                                +--------------------------+
                                                            |
                                                            v
                                                +--------------------------+
                                                | Cosmos DB Emulator       |
                                                | (Docker Container)       |
                                                +--------------------------+

Core Components

Azure Cosmos DB vNext Emulator

A local Docker container that emulates the Azure Cosmos DB (SQL API) service, allowing you to experiment with queries and data models without any cloud resources.

Codapi

A lightweight sandbox server used for interactive documentation and code examples. In the playground, Codapi:

• Manages isolated Docker containers for each query execution
• Provides a JavaScript widget (codapi-js) for the frontend
• Executes user code in an ephemeral environment to ensure isolation

Query Execution Flow

1. nginx serves the frontend and forwards API requests to Codapi.
2. For each query run, Codapi spawns an ephemeral query Docker container.
3. Inside this container, a Python component connects to the long‑running Cosmos DB emulator.
4. A temporary Cosmos DB container is created, seeded with the user’s data, the query is executed, and results are returned.
5. After execution, both the temporary Cosmos DB container and the query container are cleaned up.

Limitations

• Designed for small‑ish datasets; performance may degrade with larger volumes.
• Not intended for production workloads.
• Limitations and constraints may change—refer to the GitHub repository for the most up‑to‑date information.

Feedback and Contributions

Have suggestions or want to contribute? Visit the GitHub repository, open an issue, or submit a pull request.

Happy querying!