Salam Web Playground

Salam Web Playground¶

Run Salam entirely in the browser. Edit code, run it, and preview layout pages - powered by the Salam compiler compiled to WebAssembly. Switching to فارسی or العربية flips the whole UI and the editor to true right-to-left; English is left-to-right. No server, no C toolchain in the browser.

The editor itself is written entirely in Salam, not hand-authored HTML/CSS/JS:

src/page.salam - the page structure and all styling (toolbar, panes, dropdown, theming, responsive layout), compiled by the layout DSL (salam web).
src/app.salam - all interactivity (state, i18n, the live syntax highlighter, line numbers, Wasm boot, run/compile dispatch, keyboard shortcuts, resizable split, mobile menu), compiled by the JS backend (salam js).
src/examples_data.salam - the example programs (en/fa/ar), generated by compiler/tools/salam/gen-examples.salam from tests/*/editor-selected/.
assets/ - the only hand-authored files: small SVG icons and the logo, used via CSS mask-image so they can be recolored per theme without any raw HTML.

build.sh combines page.salam + app.salam into the single index.html that ships to users (CSS and JS inlined, no separate asset requests beyond the Wasm bundle).

How it works¶

The browser cannot run a C compiler, so general programs run through Salam’s tree-walking interpreter (src/interp) rather than the C-codegen backend. The whole frontend (lexer → parser → semantic analyzer) plus the interpreter and the layout engine are compiled to salam-wa.wasm/salam-wa.js with Emscripten and driven from app.salam via Module.cwrap:

Mode	Wasm entry point	What runs
App	`salam_web_run_app(source, lang)`	the interpreter; returns the program output
Layout	`salam_web_build_layout(source, lang)`	the layout backend; returns an HTML page

The selected UI language (lang) is also the language the source is lexed in - switching to فارسی/العربية and compiling English-keyword source now correctly fails with a real diagnostic, rather than silently auto-detecting English.

Building¶

Requires the Emscripten SDK and a built salam compiler at the repository root:

git clone https://github.com/emscripten-core/emsdk
cd emsdk && ./emsdk install latest && ./emsdk activate latest && . ./emsdk_env.sh
cd /path/to/Salam/compiler
sh tools/bash/build-wasm.sh   # -> ../editor/salam-wa.{js,wasm,data}, regenerates
                              #    examples_data.salam, and builds ../editor/index.html

build-wasm.sh preloads the std/ directory into the module’s virtual filesystem so import resolution and the layout schema work in the browser. To rebuild just the page (after editing src/page.salam or src/app.salam, without rebuilding Wasm):

sh editor/build.sh

Running it¶

Serve the editor/ directory over HTTP (Wasm needs a real origin, not file://):

sh compiler/tools/bash/editor-serve.sh        # http://localhost:8080  (no rebuild for UI dev)
sh compiler/tools/bash/editor-serve.sh 9000   # ... on a custom port

Or serve it directly: cd editor && python -m http.server 8080.

Trying the interpreter without the browser¶

The same interpreter runs natively:

salam exec tests/fa/types/struct.salam --lang=fa
salam run  --interp tests/en/apps/brainfuck.salam