Playground – Interactive Experiments

Interactive Demos

Try out these interactive projects and experiments

Chatbot Playground

Hi! I'm your AI assistant. Click the ⚙️ settings to add your API key and start chatting!

JavaScript OpenRouter AI

Color Palette Generator

Click swatches to copy • Lock colors to preserve • 16+ aesthetic themes

JavaScript CSS Design

3D Cube Viewer

Zoom 3x

Drag to rotate • Zoom with slider • WebGL powered 3D rendering

JavaScript Three.js 3D Interactive

Weather Widget

🌤️

Enter a city to check weather

Live weather data powered by API

Real-time weather data • Global city support • Dynamic backgrounds

JavaScript API Weather Interactive

Python Console

Interactive Python Console

>>>

Real Python execution • Multi-line support • Full error handling

Python Console Interactive Code

Drawing Canvas

Color:

Size: 3

Canvas Creative Fun

Data Visualization Playground

Data Source

Sample Datasets:

Or Upload CSV:

Drop CSV here or click to browse

Data Preview:

Select a dataset to preview

Chart Settings

Chart Type:

X-Axis Column:

Y-Axis Column:

Ready to Visualize!

Select a dataset and chart type to get started

Upload CSV or use sample data • Choose chart type • Map columns • Interactive charts with hover tooltips

Data Viz Charts Analytics Interactive

Typing Speed Test

WPM

100%

Accuracy

Time

Click Start to begin the typing test...

Performance Dashboard

Average WPM

Best WPM

Tests Completed

Avg Accuracy

Typing Consistency --

Speed Progress --

Typing Speed Test WPM Practice

API Tester

Request Builder

Authentication:

Headers:

Query Parameters:

cURL Command:

curl -X GET https://api.example.com/users

Response Viewer

Ready to send your first request

🚀 REST API Testing 🔐 Auth Support 💾 Export/Import 📡 Real-time Testing

Chatbot Playground

What is this?

An interactive AI chatbot that connects to multiple AI models through OpenRouter API. Chat with Mistral, Grok, Llama, and more!

How to use:

Click the ⚙️ settings icon
Add your OpenRouter API key
Choose your preferred AI model
Save settings and start chatting!

Features:

Multiple AI models (Mistral 7B, Grok 4 Fast, Llama 3)
Real-time conversation
Secure local API key storage
Clean, responsive interface

Your API key is stored locally in your browser and never shared.

Color Palette Generator

What is this?

A professional color palette generator with 16+ aesthetic themes that creates beautiful, harmonious color schemes perfect for design projects.

How to use:

Choose an aesthetic theme (Pink Aesthetic, Pastels, Earth Tones, etc.)
Click "Generate" to create new color combinations
Click any color swatch to copy its HEX code
Lock colors (🔒) to preserve them when regenerating
Use "Copy All Hex Codes" to get all colors at once

Features:

16+ aesthetic color themes
Lock/unlock individual colors
HEX and RGB values displayed
One-click copy to clipboard
Copy all hex codes as comma-separated list
Professional color theory algorithms

Choose from 16+ beautiful aesthetic themes to create professional color palettes instantly!

3D Cube Viewer

What is this?

An interactive 3D cube viewer built with Three.js. Drag to rotate, zoom, and explore the cube from different angles with smooth physics-based animations.

Controls:

Drag: Click and drag to rotate the cube freely
Zoom: Use the slider to zoom in/out (0.5x - 3x)
Preset Views: Quick snap to Front, Top, or Side view
Reset: Return to default orientation and zoom

Features:

Smooth physics-based rotation with easing
Real-time 3D rendering with Three.js
Responsive design that scales on all devices
Colorful faces with gradient materials
Interactive controls with visual feedback

Perfect for learning 3D interactions and WebGL capabilities!

Weather Widget

What is this?

A live weather widget that fetches real-time weather data for any city worldwide using the WeatherAPI.com service.

How to use:

Add your WeatherAPI.com API key in settings (⚙️)
Type any city name in the search box
Click "Search" or press Enter
View live weather data with dynamic backgrounds

Features:

Real-time weather data updates
Global city support with country flags
Dynamic backgrounds based on weather conditions
Animated weather icons and smooth transitions
Temperature, humidity, wind speed, and more

Get your free API key from WeatherAPI.com

Python Console

What is this?

A fully interactive Python console that runs real Python code in your browser using Pyodide (Python compiled to WebAssembly).

How to use:

Type Python commands in the console like a real terminal
Press Enter to execute single-line commands
Use Shift+Enter for multi-line code blocks
View outputs and errors just like in Python IDLE
Use the Clear button to reset the console

Features:

Real Python execution with full standard library
Support for variables, functions, loops, and classes
Multi-line code support with proper indentation
Full error tracebacks like real Python
Persistent variables across commands
Import and use Python packages

Example Commands:

print("Hello, World!")

x = 42

for i in range(5): print(i)

Drawing Canvas

What is this?

A simple doodle pad where you can draw, erase, pick colors, and download your art as a PNG image.

How to use:

Select a color using the color picker
Choose between Draw or Erase tools
Adjust brush size with the slider
Click and drag on the canvas to draw
Use Save button to download your artwork
Use Clear button to start over

Features:

Smooth drawing with mouse and touch support
Color picker for unlimited color choices
Adjustable brush size (1-20 pixels)
Eraser tool for corrections
Download artwork as PNG image
Responsive canvas that works on all devices

Perfect for quick sketches, doodles, and creative expression!

Data Visualization Playground

What is this?

A comprehensive data visualization playground where you can upload CSV files or use sample datasets to create interactive charts with Chart.js.

How to use:

Choose a sample dataset or upload your own CSV file
Preview your data in the data table
Select chart type (Bar, Line, Pie, Scatter, Area)
Map CSV columns to chart axes (X and Y)
Click "Update Chart" to render visualization
Export your chart as PNG or download data as CSV

Features:

Drag & drop CSV file upload
Multiple sample datasets included
5 chart types: Bar, Line, Pie, Scatter, Area
Interactive charts with hover tooltips
Dynamic column mapping
Export charts as PNG images
Download processed data as CSV
Responsive design for all devices

Sample Datasets:

Sales 2024: Monthly sales data with revenue figures
Population by Country: World population statistics
Website Traffic: Daily visitor analytics

Perfect for data analysis, business reporting, and educational purposes!

API Tester

What is this?

A comprehensive REST API testing tool similar to Postman or Insomnia. Test HTTP requests, manage authentication, view responses, and debug APIs all in your browser.

Core Features:

HTTP Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS
Authentication: Bearer Token, Basic Auth, API Key
Headers & Parameters: Add custom headers and query parameters
Request Body: JSON, Raw Text, Form Data support
Response Viewer: Formatted JSON, Headers, Raw response tabs
cURL Export: Generate and copy cURL commands

Developer Tools:

JSON formatting and validation
Request history with status codes and timing
Environment selector (Dev, Staging, Prod)
Response time and size metrics
Copy response data to clipboard
Error handling with CORS guidance

Quick Start:

Enter your API URL (e.g., https://jsonplaceholder.typicode.com/posts)
Select HTTP method (GET for testing)
Add headers or auth if needed
Click "Send Request" to test
View formatted response in the right panel

CORS Note: Some APIs may block browser requests due to CORS policy. Use a CORS proxy or test with public APIs for best results.

Perfect for API development, testing, and debugging workflows!

Typing Speed Test

What is this?

A comprehensive typing speed test that measures your words per minute (WPM), accuracy, and provides real-time feedback to help improve your typing skills.

How to use:

Choose your preferred test duration (30s, 1min, 2min)
Click "Start" to begin the test
Type the displayed text in the input area below
Watch your live WPM and accuracy metrics
Complete the test to see detailed results
Click "Take Another Test" to try again

Features:

Real-time WPM and accuracy calculation
Visual highlighting of correct/incorrect typing
Multiple test durations available
Progress bar showing completion
Detailed results with mistakes count
Characters per minute (CPM) tracking
Pause and restart functionality
Responsive design for all devices

Metrics explained:

WPM: Words per minute (standard 5 characters = 1 word)
Accuracy: Percentage of correctly typed characters
CPM: Characters per minute including spaces
Mistakes: Total number of incorrect keystrokes

Practice regularly to improve your typing speed and accuracy!

Explore my interactive projects

Interactive Demos

Chatbot Playground

Color Palette Generator

3D Cube Viewer

Weather Widget

Python Console

Drawing Canvas

Data Visualization Playground

Data Source

Chart Settings

Typing Speed Test

Performance Dashboard

API Tester

Request Builder

Response Viewer

Request Failed

API Settings

Chatbot Playground

What is this?

How to use:

Features:

Color Palette Generator

What is this?

How to use:

Features:

3D Cube Viewer

What is this?

Controls:

Features:

Weather Widget

What is this?

How to use:

Features:

Weather API Settings

Python Console

What is this?

How to use:

Features:

Example Commands:

Drawing Canvas

What is this?

How to use:

Features:

Data Visualization Playground

What is this?

How to use:

Features:

Sample Datasets:

API Tester

What is this?

Core Features:

Developer Tools:

Quick Start:

Typing Speed Test

What is this?

How to use:

Features:

Metrics explained: