JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ace Editor with Virtual Keyboard</title>
    <style>
        /* Styles for the editor and keyboard container */
        #editor {
            height: 300px;
            width: 100%;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        #keyboard-container {
            margin-top: 10px;
        }

        .simple-keyboard {
            background: #f5f5f5;
        }
    </style>
    <!-- Ace Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.14.0/ace.js"></script>
    <!-- Simple Keyboard -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
</head>
<body>
    <div id="editor"></div>
    <div class="simple-keyboard"></div>

    <script>
        // Initialize Ace Editor
        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");

        // Initialize Simple Keyboard
        const Keyboard = new SimpleKeyboard.default({
            onKeyPress: (key) => handleKeyPress(key),
            theme: "hg-theme-default",
            layout: {
                default: [
                    "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
                    "q w e r t y u i o p [ ] \\",
                    "a s d f g h j k l ; ' {enter}",
                    "z x c v b n m , . / {shift}",
                    "{space}"
                ]
            },
            display: {
                "{bksp}": "⌫",
                "{enter}": "↵",
                "{shift}": "⇧",
                "{space}": "⎵"
            },
            debug: true, // Optional: Logs key events for debugging
            // Explicitly target the #keyboard-container element
         ...