playground/index.html at main · multilingualprogramming/playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<!--
  SPDX-FileCopyrightText: 2026 John Samuel <johnsamuelwrites@gmail.com>
  SPDX-License-Identifier: GPL-3.0-or-later

  Interactive Playground - Multilingual Programming Language
  Architecture
  ------------
  - Pyodide - CPython 3.12 compiled to WASM; runs the full interpreter.
  - WATCodeGenerator - walks the AST inside Pyodide; emits valid WAT.
  - wabt.js - WABT on WASM; compiles WAT -> binary, run by the browser.
-->
<html lang="en" data-theme="dark">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multilingual Programming - Interactive Playground</title>

    <meta name="description"
      content="Interactive playground for the Multilingual Programming Language. Write multilingual code and compile to Python and WebAssembly in your browser.">
    <link rel="canonical" href="https://multilingualprogramming.github.io/playground/">
    <link rel="icon" type="image/svg+xml" href="./assets/images/favicon.svg">
    <link rel="icon" href="./favicon.ico" sizes="any">
    <link rel="shortcut icon" href="./assets/images/favicon.svg">
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="manifest" href="./site.webmanifest">
    <meta name="theme-color" content="#060614">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Multilingual Programming Language">
    <meta property="og:title" content="Multilingual Programming - Interactive Playground">
    <meta property="og:description"
      content="Write multilingual code and run it in the browser with Python and WebAssembly.">
    <meta property="og:url" content="https://multilingualprogramming.github.io/playground/">
    <meta property="og:image" content="https://multilingualprogramming.github.io/playground/assets/images/og-image.svg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Multilingual Programming - Interactive Playground">
    <meta name="twitter:description"
      content="Interactive browser playground for multilingual programming with Python and WASM backends.">
    <meta name="twitter:image"
      content="https://multilingualprogramming.github.io/playground/assets/images/og-image.svg">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2|family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet">

    <!-- Pyodide -->
    <script src="https://cdn.jsdelivr.net/pyodide/v0.27.0/full/pyodide.js"></script>

    <!-- wabt.js: WAT -> binary WASM -->
    <script src="https://cdn.jsdelivr.net/npm/wabt@1.0.38/index.js"></script>

    <!-- CodeMirror 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css"
      crossorigin="anonymous">
    <link rel="stylesheet" id="cm-theme-dark"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css" crossorigin="anonymous">
    <link rel="stylesheet" id="cm-theme-light"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/eclipse.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/playground.css">
  </head>

  <body>
    <a class="skip-link" href="#main">Skip to editor and results</a>
    <div id="app">

      <!-- Header -->
      <header class="glass">
        <div class="h-logo"><img src="./assets/images/logo.svg" alt="Multilingual Programming logo"></div>
        <div class="h-text">
          <div class="h-title">Multilingual Programming Language</div>
          <div class="h-sub">Code in 17 human languages | Pyodide WASM | WAT -> browser WebAssembly</div>
        </div>
        <nav class="h-nav" aria-label="Primary">
          <a id="home-link" class="nav-home" href="./">Home</a>
          <a class="nav-github" href="https://github.com/johnsamuelwrites/multilingual" target="_blank"
            rel="noopener">GitHub</a>
          <button type="button" id="theme-toggle" title="Toggle light / dark mode" aria-label="Switch to light theme">☀️</button>
        </nav>
      </header>

      <!-- Toolbar -->
      <div id="toolbar" role="region" aria-label="Playground controls">
        <label for="lang-select" data-i18n="label_language">Language</label>
        <div class="lang-wrap">
          <select id="lang-select" aria-label="Select human language" title="Select programming language">
            <option value="en">English (en)</option>
            <option value="fr">Français (fr)</option>
            <option value="es">Español (es)</option>
            <option value="de">Deutsch (de)</option>
            <option value="it">Italiano (it)</option>
            <option value="pt">Português (pt)</option>
            <option value="nl">Nederlands (nl)</option>
            <option value="pl">Polski (pl)</option>
            <option value="sv">Svenska (sv)</option>
            <option value="da">Dansk (da)</option>
            <option value="fi">Suomi (fi)</option>
            <option value="hi">हिन्दी (hi)</option>
            <option value="ar">العربية (ar)</option>
            <option value="bn">বাংলা (bn)</option>
            <option value="ta">தமிழ் (ta)</option>
            <option value="zh">中文 (zh)</option>
            <option value="ja">日本語 (ja)</option>
          </select>
        </div>

        <label for="example-select" data-i18n="label_example">Example</label>
        <select id="example-select" aria-label="Select example complexity" title="Switch between example levels">
          <option value="basics" data-i18n="example_basics">Basics</option>
          <option value="medium" data-i18n="example_medium">Medium</option>
          <option value="advanced" data-i18n="example_advanced">Advanced</option>
        </select>

        <button type="button" id="run-btn" class="btn" disabled title="Run (Ctrl+Enter / Cmd+Enter)">
          <span data-i18n="btn_run">Run</span> <span class="kbd-hint">Ctrl+Enter</span>
        </button>
        <button type="button" id="clear-btn" class="btn" data-i18n="btn_clear" title="Clear output">
          Clear
        </button>
        <button type="button" id="share-btn" class="btn" data-i18n="btn_share" title="Copy permalink to clipboard" aria-label="Copy permalink to clipboard">
          Share
        </button>

        <div id="status-bar" role="status" aria-live="polite" aria-atomic="true">
          <span class="dot loading" id="status-dot"></span>
          <span id="status-text">Loading runtimes...</span>
        </div>
        <div class="runtime-pill" title="Installed multilingualprogramming package version">
          <span>Package</span>
          <strong id="package-version">loading...</strong>
        </div>
      </div>

      <!-- Main -->
      <main id="main">

        <!-- Editor pane -->
        <div id="editor-pane" class="pane">
          <div class="pane-header" id="editor-pane-title">
            <span data-i18n="pane_source">Source Code</span>
            <span class="lang-badge" id="lang-badge">en</span>
          </div>
          <div id="editor-wrapper" aria-labelledby="editor-pane-title">
            <label for="code-area" class="sr-only">Source code editor</label>
            <textarea id="code-area"></textarea>
          </div>
        </div>

        <!-- Drag resizer -->
        <div id="resizer" role="separator" aria-label="Resize editor and output panels" aria-controls="editor-pane output-pane"
          aria-orientation="vertical" aria-valuemin="20" aria-valuemax="80" aria-valuenow="50" tabindex="0"></div>

        <!-- Output pane -->
        <div id="output-pane" class="pane">
          <div class="tabs" role="tablist" aria-label="Output views">
            <button type="button" class="tab-btn active" id="tab-output" role="tab" aria-selected="true"
              aria-controls="panel-output" tabindex="0" data-tab="output" data-i18n="tab_output">
              Output
            </button>
            <button type="button" class="tab-btn" id="tab-python" role="tab" aria-selected="false"
              aria-controls="panel-python" tabindex="-1" data-tab="python">
              Python
            </button>
            <button type="button" class="tab-btn" id="tab-wat" role="tab" aria-selected="false"
              aria-controls="panel-wat" tabindex="-1" data-tab="wat">
              WAT / WASM
            </button>
            <button type="button" class="tab-btn" id="tab-rust" role="tab" aria-selected="false"
              aria-controls="panel-rust" tabindex="-1" data-tab="rust">
              Rust / Wasmtime
            </button>
          </div>

          <!-- Output tab -->
          <div class="tab-panel active" id="panel-output" role="tabpanel" aria-labelledby="tab-output" tabindex="0">
            <div class="panel-toolbar">
              <button type="button" class="copy-btn" data-target="output-console" title="Copy output to clipboard" data-i18n="btn_copy">Copy</button>
            </div>
            <pre id="output-console" class="console empty" dir="auto">Output will appear here after clicking Run.</pre>
          </div>

          <!-- Python tab -->
          <div class="tab-panel" id="panel-python" role="tabpanel" aria-labelledby="tab-python" tabindex="0" hidden>
            <div class="panel-toolbar">
              <button type="button" class="copy-btn" data-target="python-view" title="Copy Python source to clipboard" data-i18n="btn_copy">Copy</button>
            </div>
            <pre id="python-view" class="code-view">Generated Python source will appear here.</pre>
          </div>

          <!-- WAT / WASM tab -->
          <div class="tab-panel" id="panel-wat" role="tabpanel" aria-labelledby="tab-wat" tabindex="0" hidden>
            <div class="release-note">
              <p><strong>0.6.0 backend note:</strong> this tab now reflects broader WAT/WASM lowering, including
                stateful classes, inherited methods, <code>with</code>, <code>try/except</code>, <code>lambda</code>,
                <code>match/case</code>, <code>async/await</code>, <code>@property</code>, and bytes literals.
              </p>
            </div>

            <!-- Pipeline diagram -->
            <div class="pipeline-box">
              <div class="pipeline-title">WebAssembly Code Generation Pipeline</div>
              <div class="pipeline-flow">
                <span class="pip-node">Source (.ml)</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node">Lexer</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node">Parser</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node">AST</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node hl">WATCodeGenerator</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node hl">.wat</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node hl">wabt.js</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node hl">binary .wasm</span>
                <span class="pip-arrow">-&gt;</span>
                <span class="pip-node hl">WebAssembly.instantiate()</span>
              </div>
            </div>

            <div id="wat-split">
              <div id="wat-code-wrap">
                <div class="wat-label">Generated WAT source
                  <button type="button" class="copy-btn copy-btn-inline" data-target="wat-view" title="Copy WAT to clipboard" data-i18n="btn_copy">Copy</button>
                </div>
                <pre id="wat-view" class="code-view">WAT source will appear here after clicking Run.</pre>
              </div>
              <div id="wasm-exec-wrap">
                <div class="wat-label">
                  <span class="wasm-badge">WASM</span>
                  Native browser WebAssembly execution output
                  <button type="button" class="copy-btn copy-btn-inline" data-target="wasm-exec-console" title="Copy WASM output to clipboard" data-i18n="btn_copy">Copy</button>
                </div>
                <pre id="wasm-exec-console" class="console empty" dir="auto">WASM execution output will appear here.</pre>
              </div>
            </div>
          </div><!-- #panel-wat -->

          <!-- Rust / Wasmtime tab -->
          <div class="tab-panel" id="panel-rust" role="tabpanel" aria-labelledby="tab-rust" tabindex="0" hidden>
            <div class="pipeline-box">
              <div class="pipeline-title">Rust bridge generated for Wasmtime workflows</div>
            </div>
            <div id="rust-split">
              <div id="rust-code-wrap">
                <div class="wat-label">Generated Rust bridge source
                  <button type="button" class="copy-btn copy-btn-inline" data-target="rust-view" title="Copy Rust source to clipboard" data-i18n="btn_copy">Copy</button>
                </div>
                <pre id="rust-view" class="code-view">Generated Rust source will appear here after clicking Run.</pre>
              </div>
              <div id="rust-exec-wrap">
                <div class="wat-label">Wasmtime run hints
                  <button type="button" class="copy-btn copy-btn-inline" data-target="rust-run-console" title="Copy run hints to clipboard" data-i18n="btn_copy">Copy</button>
                </div>
                <pre id="rust-run-console" class="console empty" dir="auto">Local run instructions will appear here.</pre>
              </div>
            </div>
          </div><!-- #panel-rust -->

        </div><!-- #output-pane -->
      </main><!-- #main -->

      <!-- Footer -->
      <footer>
        <span>
          Powered by
          <a href="https://pyodide.org" target="_blank" rel="noopener">Pyodide</a> (CPython 3.12 on WASM) |
          <a href="https://github.com/WebAssembly/wabt" target="_blank" rel="noopener">wabt.js</a> (WAT -> WASM) |
          <a href="https://codemirror.net" target="_blank" rel="noopener">CodeMirror</a> |
          <a id="complete-features-link"
            href="https://github.com/johnsamuelwrites/multilingual/blob/main/examples/complete_features_en.ml"
            target="_blank" rel="noopener" title="Open complete feature example for the selected language">Complete
            features (en)</a>
        </span>
        <span class="footer-pill">
          <span class="dot-sm"></span>
          <a href="https://github.com/johnsamuelwrites/multilingual" target="_blank" rel="noopener">
            Source | GPL-3.0-or-later
          </a>
        </span>
      </footer>

    </div><!-- #app -->

    <!-- CodeMirror 5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/mode/overlay.min.js"
      crossorigin="anonymous"></script>
    <script type="module" src="./assets/main.js"></script>
  </body>

</html>