Test²Sandbox

A lightweight JavaScript playground framework for rapid prototyping and experimentation. Test²Sandbox provides an intuitive API for creating interactive web applications with real-time console output and dynamic DOM manipulation.

✨ Features

• Instant Playground: No complex setup required - start coding immediately
• Real-time Console: Captured console output with interactive display
• Dynamic DOM Builder: Fluent API for creating and styling HTML elements
• Hot Reload: Development server with automatic refresh
• Clean Architecture: Modular design with separation of concerns
• Browser Integration: Seamless browser launching and control

🚀 Quick Start

Installation

1. Clone or download the repository
2. Install dependencies:

npm install

Running the Playground

Start the development server:

npm run dev
# or
npm start

The playground will be available at http://localhost:5173

Interactive Controls:

• Press o to open the playground in your browser
• Press q to quit the server
• Ctrl+C to force shutdown

📖 Basic Usage

Create your playground in main.js:

import { playground } from "./github/lib/playground.js";

// Initialize the playground
playground.init();

// Build your DOM structure
playground.struct(() => {
    const title = document.createElement("h1");
    title.textContent = "Hello World";
    
    const button = document.createElement("button");
    button.textContent = "Click me!";
    button.onclick = () => console.log("Button clicked!");
});

// Add custom styles
playground.style({
    'h1': { 
        color: '#007acc', 
        textAlign: 'center' 
    },
    'button': { 
        padding: '10px 20px', 
        fontSize: '16px' 
    }
});

🔧 API Reference

Playground Object

playground.init()

Initializes the playground container. Creates a #playground div if it doesn't exist.

playground.struct(callback, options)

Builds DOM structure using a callback function.

Parameters:

• callback: Function that creates and returns DOM elements
• options: Configuration object
  • clear: Boolean - Clear playground before adding content

Return values from callback:

• Single Node: Appends the node
• Array of Nodes: Appends all nodes
• DocumentFragment: Appends fragment contents
• Nothing: Auto-collects all created elements

playground.style(definition, options)

Applies CSS styles to the playground.

Parameters:

• definition: String (raw CSS) or Object (selector-based rules)
• options: Configuration object
  • replace: Boolean - Replace existing styles
  • id: String - Style element ID

Console Output

The framework automatically captures console.log() output and displays it in the #javascript-output element with syntax highlighting and formatting.

🏗️ Project Structure

TestSquared-Playground/
├── main.js              # Your playground code
├── package.json         # Project dependencies
├── server/
│   └── dev-server.js    # Express development server
└── github/
    └── lib/
        ├── playground.js # Core playground API
        └── webStyle.css  # Default styling

🎨 Styling

The framework includes a dark theme by default. You can customize the appearance by:

1. Using the playground.style() API:

playground.style({
    '.my-class': { 
        backgroundColor: '#f0f0f0',
        padding: '1rem'
    }
});

2. Modifying github/lib/webStyle.css for global changes

3. Adding your own CSS files and linking them in the server template

🔌 Server Configuration

The development server (server/dev-server.js) provides:

• Static file serving for assets
• Hot reload functionality
• Automatic browser launching
• Interactive terminal controls
• Environment variable support (PORT, AUTO_OPEN)

Default port: 5173 (configurable via PORT environment variable)

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the terms specified in the LICENSE file.

🙋‍♂️ Author

Created by syntaxMORG0

---

Happy coding! 🚀