An interactive playground to run, debug, and explore JavaScript and TypeScript code in real-time.
Syntax is a lightweight desktop app and web playground designed for developers who want to visualize code execution instantly — line by line, with zero setup.
| Platform | Link |
|---|---|
| Windows (Installer) | Syntax Setup 1.0.1.exe |
| Windows (Portable) | Syntax 1.0.1.exe |
| macOS (Intel) | Syntax-1.0.1.dmg |
| macOS (Apple Silicon) | Syntax-1.0.1-arm64.dmg |
The desktop app works 100% offline. No internet required after installation.
- Real-time Execution — Code is transpiled and executed in a dedicated Web Worker using Sucrase for near-instant feedback.
- Incremental Execution — Only re-evaluates from the first changed statement. Results for unchanged lines are preserved instantly — zero flicker, maximum performance.
- TypeScript Support — Full support for TS syntax, interfaces, generics, and types. Switch between JS and TS modes with a single click.
- Interactive Console — See the result of every expression right next to the line that produced it.
- Top-Level Mode — Toggle to automatically log expressions without needing
console.log. - Monaco Editor — Powered by the same engine as VS Code, including IntelliSense, snippets, and syntax highlighting.
- Flexible Layout — Swap editor and console positions, toggle minimap and word wrap.
- Themes — Via Láctea (default), VS Dark, VS Light.
- Offline-First — All dependencies bundled. No CDN, no network requests from the app itself.
| Layer | Tech |
|---|---|
| UI Framework | React 19 |
| Bundler | Vite 7 |
| Desktop | Electron 42 |
| Editor | Monaco Editor |
| Transpiler | Sucrase |
| Parser | Acorn |
| Styling | Tailwind CSS 4 |
# Clone
git clone https://github.com/RoyNadiel/Syntax.git
cd Syntax
# Install dependencies
pnpm install
# Web dev server (Vite, with HMR)
pnpm dev
# Launch as Electron app (builds first)
pnpm electron
# Launch Electron with existing dist (faster)
pnpm electron:dev
# Generate installers (.exe / .dmg)
pnpm packageSyntax doesn't just eval() your code. It:
- Transpiles — Converts TypeScript to JavaScript via Sucrase.
- Parses — Builds an Abstract Syntax Tree (AST) with Acorn.
- Instruments — Injects tracking calls into the AST to capture expression values and console output.
- Diffs — Compares top-level statements against the previous execution to find the first change point.
- Executes — Runs only what changed, skipping result recording for unchanged lines before the divergence point.
- Visualizes — Maps captured results back to their original line numbers in the editor.
All of steps 1–5 happen inside a Web Worker to keep the UI thread unblocked.
New releases are built automatically via GitHub Actions when a version tag is pushed:
git tag v1.x.x
git push origin v1.x.xThe workflow builds Windows (.exe) and macOS (.dmg for Intel and Apple Silicon) binaries and uploads them to the GitHub Release automatically.
This project is licensed under the terms of the MIT Non-Commercial License (which permits personal, educational, and non-commercial use, but strictly prohibits commercial exploitation). See LICENSE for full details.
To push new versions use the configured github workflow action.