// React with automatic JSX transformation
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

# Python runs via Brython
import sys

print(f"Python version: {sys.version}")

for i in range(5):
    print(f"Hello from Python! {i}")

// Go runs via TinyGo + WebAssembly
package main

import "fmt"

func main() {
    fmt.Println("Hello from Go!")
    for i := 0; i < 5; i++ {
        fmt.Printf("Count: %d\n", i)
    }
}

# Ruby runs via ruby.wasm
puts "Hello from Ruby!"

5.times do |i|
  puts "Count: #{i}"
end

// Type definitions are automatically loaded when you import from npm
import { createPlayground } from 'livecodes';

// Full IntelliSense and autocomplete available
const playground = await createPlayground('#container', {
  config: {
    // TypeScript knows all available configuration options
    markup: {
      language: 'html',
      content: '<h1>Hello!</h1>',
    },
  },
});

// Method signatures and documentation on hover
await playground.run();

// Import from npm via esm.sh (default)
import { format } from 'date-fns';

console.log(format(new Date(), 'yyyy-MM-dd'));

// Import from deno.land/x
import { serve } from 'https://deno.land/std/http/server.ts';

// Import from jsr.io
import { encodeBase64 } from 'jsr:@std/encoding/base64';

// Import directly from GitHub
import { component } from 'github:username/repo/file.js';

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container');

// Run code
await playground.run();

// Get current code
const code = await playground.getCode();

// Update configuration
await playground.setConfig({
  script: {
    language: 'typescript',
    content: 'console.log("Updated!");',
  },
});

// Get shareable URL
const url = await playground.getShareUrl();

// Format code
await playground.format();

// Show/hide specific UI elements
await playground.show('console', 'compiled');

// Watch for events
playground.watch('code', (code) => {
  console.log('Code changed:', code);
});

import { getPlaygroundUrl } from 'livecodes';

// Generate a shareable URL
const url = getPlaygroundUrl({
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
});

console.log(url);
// Output: https://livecodes.io/?x=id/NobwRAZglgngDgBwAYT...