Kotlin Compose Web Playground

Kotlin Code Editor
Counter
Hello
Form
Neumorphic
@Composable
fun MyScreen() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Hello, World!", modifier = Modifier.padding(bottom = 16.dp))
        Box(
            modifier = Modifier
                .background(Color(0xFFE0E5EC))
                .border(1px, Color(0xFFA3B1C6))
                .padding(16)
                .rounded(12)
        ) {
            Column {
                TextField(value = "Type here...", onValueChange = {})
                Button(onClick = {}) { Text("Click me") }
            }
        }
    }
}

MyScreen()</textarea_value>
                </div>
            </div>
            
            <div class="panel preview-panel">
                <div class="panel-header preview-header">
                    <span>Live Preview</span>
                    <div class="status-item">
                        <span id="compileStatus">Ready</span>
                    </div>
                </div>
                <div class="output-container">
                    <div class="output">
                        <h2 style="color: #4A5568; font-weight: 500; margin-bottom: 16px;">
                            <span>Rendered Output</span>
                        </h2>
                        <div class="output-area" id="previewOutput">
                            <!-- Preview will render here -->
                            <div class="neumorphic-box">
                                <p class="counter-display">Counter: 0</p>
                                <input type="text" class="neumorphic-input" placeholder="Enter your name...">
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;">
                                    <button class="neumorphic-button" onclick="sayHello()">Say Hello</button>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-top: 12px;">
                                    <button class="neumorphic-button" onclick="decrementCounter()">-</button>
                                    <button class="neumorphic-button" onclick="incrementCounter()">+</button>
                                </div>
                            </div>
                            
                            <h3 style="color: #4A5568; font-size: 14px; margin: 24px 0 12px 0;">Color Palette</h3>
                            <div class="palette-row">
                                <div class="color-swatch" style="background: #E0E5EC; color: #4A5568;">Bg</div>
                                <div class="color-swatch light">Light</div>
                                <div class="color-swatch dark">Dark</div>
                                <div class="color-swatch text">Text</div>
                                <div class="color-swatch blue">Blue</div>
                                <div class="color-swatch teal">Teal</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="status-bar">
                    <div class="status-item">
                        <span>✓ Neumorphism Colors</span>
                        <span>• Column, Row, Box</span>
                        <span>• State handling</span>
                    </div>
                    <div class="status-item">
                        <span>Compose UI API</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let counter = 0;
        
        function runCode() {
            const output = document.getElementById('previewOutput');
            const status = document.getElementById('compileStatus');
            const code = document.getElementById('codeEditor').value;
            
            status.innerHTML = '<span class="spinner"></span>Compiling...';
            
            setTimeout(() => {
                // Check code for patterns
                if (code.includes('remember') && code.includes('mutableStateOf')) {
                    renderInteractiveDemo();
                } else if (code.includes('TextField') || code.includes('Text(')) {
                    renderInteractiveDemo();
                } else {
                    renderInteractiveDemo();
                }
                
                status.textContent = '✓ Compiled';
            }, 300);
        }
        
        function renderInteractiveDemo() {
            counter = 0;
            const output = document.getElementById('previewOutput');
            output.innerHTML = `
                <div class="neumorphic-box">
                    <p class="counter-display">Counter: ${counter}</p>
                    <input type="text" class="neumorphic-input" placeholder="Enter your name...">
                    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;">
                        <button class="neumorphic-button btn-accent" onclick="sayHello()">Say Hello</button>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-top: 12px;">
                        <button class="neumorphic-button" onclick="decrementCounter()">-</button>
                        <button class="neumorphic-button" onclick="incrementCounter()">+</button>
                    </div>
                </div>
                
                <h3 style="color: #4A5568; font-size: 14px; margin: 24px 0 12px 0;">Color Palette</h3>
                <div class="palette-row">
                    <div class="color-swatch" style="background: #E0E5EC; color: #4A5568;">Bg</div>
                    <div class="color-swatch light">Light</div>
                    <div class="color-swatch dark">Dark</div>
                    <div class="color-swatch text">Text</div>
                    <div class="color-swatch blue">Blue</div>
                    <div class="color-swatch teal">Teal</div>
                </div>
            `;
        }
        
        function resetPreview() {
            counter = 0;
            document.getElementById('codeEditor').value = `@Composable
fun MyScreen() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Hello, World!", modifier = Modifier.padding(bottom = 16.dp))
        Box(
            modifier = Modifier
                .background(Color(0xFFE0E5EC))
                .border(1px, Color(0xFFA3B1C6))
                .padding(16)
                .rounded(12)
        ) {
            Column {
                TextField(value = "Type here...", onValueChange = {})
                Button(onClick = {}) { Text("Click me") }
            }
        }
    }
}

MyScreen()`;
            document.getElementById('compileStatus').textContent = 'Ready';
        }
        
        function sayHello() {
            const output = document.querySelector('.output-area');
            const greetings = output.querySelectorAll('.greeting');
            const nameInput = document.querySelector('.code-editor').previousElementSibling?.querySelector('input') || document.querySelector('.neumorphic-input');
            const name = nameInput?.value?.trim() || '';
            
            const greeting = document.createElement('p');
            greeting.className = 'greeting';
            greeting.style.cssText = 'color: #5B9BD5; font-weight: 500; margin-top: 16px;';
            greeting.textContent = name ? \`Hello, \${name}!\` : 'Hello!';
            output.appendChild(greeting);
        }
        
        function incrementCounter() {
            counter++;
            document.querySelectorAll('.counter-display')[0].textContent = \`Counter: \${counter}\`;
        }
        
        function decrementCounter() {
            if (counter > 0) counter--;
            document.querySelectorAll('.counter-display')[0].textContent = \`Counter: \${counter}\`;
        }
        
        function loadTemplate(name) {
            const codeEditor = document.getElementById('codeEditor');
            
            if (name === 'counter') {
                codeEditor.value = `@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    
    Column(horizontalAlignment = Alignment.Center) {
        Text("Counter: $count")
        Row(horizontalArrangement = Arrangement.SpaceBetween) {
            Button(onClick = { if (count > 0) count-- }) { Text("-") }
            Button(onClick = { count++ }) { Text("+") }
        }
    }
}

CounterApp()`;
            } else if (name === 'hello') {
                codeEditor.value = `@Composable
fun HelloApp() {
    Column {
        Text("Hello, World!")
        Button(onClick = {}) { Text("Click me") }
    }
}

HelloApp()`;
            } else if (name === 'form') {
                codeEditor.value = `@Composable
fun FormApp() {
    var name by remember { mutableStateOf("") }
    
    Column(horizontalAlignment = Alignment.Center) {
        TextField(placeholder = "Enter name", value = name, onValueChange = { name = it })
        Button(onClick = {}) { 
            Text("Submit: ${name.ifBlank { "Empty" }}")
        }
    }
}

FormApp()`;
            } else if (name === 'neumorphic') {
                codeEditor.value = `@Composable
fun NeumorphicApp() {
    Column {
        H1("Neumorphism Demo")
        
        Box(
            modifier = Modifier
                .background(Color(0xFFE0E5EC))
                .border(1px, Color(0xFFA3B1C6))
                .shadow(2, 4, 8, 0, Color(0xFFFFFFFF.copy(alpha = 0.5f)))
                .shadow(-2, -2, 4, 0, Color(0xFFA3B1C6))
                .padding(16)
                .rounded(12)
        ) {
            Text("Neumorphic Box", color = Color(0xFF4A5568))
        }
    }
}

NeumorphicApp()`;
            }
        }
        
        // Run on load
        document.addEventListener('DOMContentLoaded', () => {
            renderInteractiveDemo();
        });
    </script>
</body>
</html>