|
{# retoor <retoor@molodetz.nl> #}
|
|
{% extends 'page.html' %}
|
|
|
|
{% set page_title = "Try Wren" %}
|
|
{% set breadcrumb = [{"title": "Playground"}] %}
|
|
{% set prev_page = {"url": "getting-started/repl.html", "title": "Using the REPL"} %}
|
|
{% set next_page = {"url": "language/index.html", "title": "Syntax Overview"} %}
|
|
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{{ static_prefix }}css/playground.css">
|
|
<script src="{{ static_prefix }}wasm/wren.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block article %}
|
|
<h1>Try Wren</h1>
|
|
|
|
<p>Write and run Wren code directly in your browser. This playground uses WebAssembly to run a subset of Wren-CLI modules.</p>
|
|
|
|
<div class="playground-container">
|
|
<div class="playground-toolbar">
|
|
<button id="run-button" class="primary" disabled>Run</button>
|
|
<button id="clear-button">Clear Output</button>
|
|
<select id="example-select">
|
|
<option value="">Load Example...</option>
|
|
<option value="hello">Hello World</option>
|
|
<option value="fibonacci">Fibonacci</option>
|
|
<option value="classes">Classes</option>
|
|
<option value="math">Math Module</option>
|
|
<option value="json">JSON</option>
|
|
<option value="datetime">DateTime</option>
|
|
<option value="base64">Base64</option>
|
|
<option value="strutil">String Utils</option>
|
|
<option value="faker">Faker Data</option>
|
|
<option value="lists">Lists and Iteration</option>
|
|
</select>
|
|
<span id="wasm-status" class="wasm-status loading">Loading...</span>
|
|
</div>
|
|
|
|
<div class="playground-editor-wrapper">
|
|
<textarea id="wren-editor" spellcheck="false" placeholder="Enter Wren code here...">System.print("Hello, World!")</textarea>
|
|
</div>
|
|
|
|
<div class="output-panel">
|
|
<div class="output-header">Output</div>
|
|
<pre id="wren-output"></pre>
|
|
</div>
|
|
|
|
<div class="playground-help">
|
|
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> to run • <kbd>Tab</kbd> inserts spaces
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Available Modules</h2>
|
|
<p>The following modules are available in this browser-based playground:</p>
|
|
|
|
<div class="modules-list">
|
|
<span class="module-badge">math</span>
|
|
<span class="module-badge">json</span>
|
|
<span class="module-badge">base64</span>
|
|
<span class="module-badge">bytes</span>
|
|
<span class="module-badge">datetime</span>
|
|
<span class="module-badge">strutil</span>
|
|
<span class="module-badge">html</span>
|
|
<span class="module-badge">markdown</span>
|
|
<span class="module-badge">argparse</span>
|
|
<span class="module-badge">wdantic</span>
|
|
<span class="module-badge">uuid</span>
|
|
<span class="module-badge">faker</span>
|
|
</div>
|
|
|
|
<div class="admonition note">
|
|
<div class="admonition-title">Note</div>
|
|
<p>Some modules require system access and are not available in the browser, including: <code>io</code>, <code>net</code>, <code>http</code>, <code>tls</code>, <code>sqlite</code>, <code>subprocess</code>, <code>os</code>, and <code>scheduler</code>.</p>
|
|
</div>
|
|
|
|
<h2>Learn More</h2>
|
|
<p>This playground is a quick way to experiment. For full functionality, install Wren-CLI locally:</p>
|
|
<ul>
|
|
<li><a href="getting-started/installation.html">Installation Guide</a></li>
|
|
<li><a href="language/index.html">Language Reference</a></li>
|
|
<li><a href="api/index.html">API Reference</a></li>
|
|
</ul>
|
|
|
|
<script src="{{ static_prefix }}js/playground.js"></script>
|
|
{% endblock %}
|