spxnso · spxnso · Nov 28, 2025 · Nov 28, 2025
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,3 +1,11 @@
+[lib]
+crate-type = ["cdylib"]
+path = "src/lib.rs"
+
+[[bin]]
+name = "spemath-cli"
+path = "src/main.rs"
+
 [package]
 name = "spemath"
 version = "0.1.0"
@@ -6,4 +14,5 @@ edition = "2024"
 [dependencies]
 log = "0.4"
 env_logger = "0.11.8"
-thiserror = "2.0.17"
+thiserror = "2.0.17"
+wasm-bindgen = "0.2"
diff --git a/README.md b/README.md
@@ -3,10 +3,6 @@
 Spemath est un langage de programmation éducatif inspiré du programme de spécialité mathématiques.  
 Il est conçu pour être fidèle aux conventions mathématiques enseignées en première ainsi que celles en terminale (bientôt!)
 
-<!-- L'objectif est de permettre de manipuler facilement des nombres, des fonctions, des suites, des dérivées et des intégrales dans un environnement proche de la notation mathématique, mais il sert surtout à illustrer mon [article de blog](https://ton-lien-ici.com). -->
-
 ## Syntaxe de base
 
 Voir la [documentation](docs/syntax.md)
-
-TODO: Flags
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spemath</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <h1>Welcome to Spemath</h1>
+    <p>Spemath is a programming language designed for educational purposes, inspired by the high-school mathematics.</p>
+    <p>See <a href="syntax.md" style="color: var(--accent);">Syntax</a> for more information.</p>
+
+    <div id="container">
+
+        <textarea id="input" placeholder="Enter your Spemath code here..."></textarea>
+        <button id="run">Run</button>
+
+        <pre id="output"></pre>
+    </div>
+
+
+    <script type="module" src="main.js"></script>
+</body>
+
+
+</html> 
diff --git a/docs/main.js b/docs/main.js
@@ -0,0 +1,20 @@
+import init, { run_code } from "./pkg/spemath.js";
+
+async function main() {
+    await init();
+
+    const input = document.getElementById("input");
+    const output = document.getElementById("output");
+    const run = document.getElementById("run");
+
+    run.addEventListener("click", () => {
+        try {
+            const result = run_code(input.value);
+            output.textContent = result;
+        } catch (err) {
+            output.textContent = "WASM Error: " + err;
+        }
+    });
+}
+
+main();
diff --git a/docs/spemath.ebnf b/docs/spemath.ebnf
diff --git a/docs/styles.css b/docs/styles.css
@@ -0,0 +1,97 @@
+:root{
+    --bg:#0f0f0f;
+    --panel:#111;
+    --muted:#1b1b1b;
+    --accent:#7c3aed;
+    --accent-hover :#9d4edd;
+    --text:#ffffff;
+    --highlight:#40c057;
+    --max-width:900px;
+    --gutter:20px;
+    --radius:4px;
+    --input-height:150px;
+    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+    height: 100%;
+    margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale;
+    padding: 0;
+}
+
+body {
+    padding: var(--gutter);
+}
+
+.container {
+    max-width: var(--max-width);
+    margin: 48px auto;
+    padding: var(--gutter);
+}
+
+h1 {
+    margin: 0 0 18px 0;
+    font-size: 1.6rem;
+    line-height: 1.2;
+}
+
+textarea,
+button,
+pre {
+    display: block;
+    width: 100%;
+    border-radius: var(--radius);
+    font-size: 16px;
+}
+
+textarea {
+    height: var(--input-height);
+    background: var(--muted);
+    color: var(--text);
+    border: 1px solid #333;
+    padding: 12px;
+    font-family: var(--font-mono);
+    resize: vertical;
+}
+
+button {
+    margin-top: 15px;
+    padding: 12px;
+    background: var(--accent);
+    border: none;
+    color: var(--text);
+    font-size: 18px;
+    cursor: pointer;
+    transition: background 160ms ease;
+    border-radius: calc(var(--radius) + 2px);
+}
+
+button:hover {
+    background: var(--accent-hover);
+}
+
+pre {
+    background: var(--panel);
+    color: var(--highlight);
+    padding: 15px;
+    margin-top: 20px;
+    min-height: var(--input-height);
+    border-radius: var(--radius);
+    white-space: pre-wrap;
+    border: 1px solid #222;
+    overflow: auto;
+}
+
+@media (max-width: 520px) {
+    .container { margin: 24px auto; padding: 14px; }
+    h1 { font-size: 1.25rem; }
+    button { font-size: 16px; padding: 10px; }
+}