/ concept-collection / numbl-web-ide
Sign in
concept-collection / numbl-web-ide
dfd6ab5
Branches
main
numbl-web-ide
Go to fileHistoryFork
Code
Clone with HTTP

Anyone can clone. Pushing asks for a username and a token.

Download dfd6ab5caaeb31dd27c6ce7536d16b2eb3fd301a
Source as zipSource as tar.gz
Jeremy Magland Test scripts: use explicit \u00a0 escape for monaco space normalization dfd6ab5 4 Commits
.githubnumbl web IDE: run .m files in the browser with numbl
publicnumbl web IDE: run .m files in the browser with numbl
scriptsTest scripts: use explicit \u00a0 escape for monaco space normalization
srcmip integration: system store in IndexedDB, shared across projects
.gitignorenumbl web IDE: run .m files in the browser with numbl
index.htmlnumbl web IDE: run .m files in the browser with numbl
package-lock.jsonmip integration: system store in IndexedDB, shared across projects
package.jsonmip integration: system store in IndexedDB, shared across projects
README.mdmip integration: system store in IndexedDB, shared across projects
tsconfig.jsonnumbl web IDE: run .m files in the browser with numbl
vite.config.tsnumbl web IDE: run .m files in the browser with numbl
README.md

numbl web IDE#

Run MATLAB-syntax .m files in your browser with numbl, inside a VS Code-style IDE built on minwebide. Projects live in your browser's IndexedDB.

Live site: https://concept-collection.github.io/numbl-web-ide/

The landing page manages projects (create / rename / duplicate / delete), each with its own file system, addressed as #/project/<id>. Create a sample project and press ▶ on a script:

  • Text output streams to the Output panel; figures open as Figure N views in the secondary side bar (rendered by numbl's own figure renderer — 2-D canvas, 3-D three.js).
  • The whole project is the workspace, numbl.org-style: functions next to the running script resolve automatically, other folders via addpath.
  • Runs use the current editor contents (saved or not), execute in a Web Worker, and can be stopped with ⏹.
  • Files a script writes (fopen/fprintf) appear in the Explorer.
  • Scripts can install packages from the mip registry: mip load --install inpoly (see scripts/mip_demo.m in the sample).
  • The project name in the status bar takes you back to the project list.

mip packages#

The mip package manager and installed packages live in a system store — a dedicated IndexedDB database shared by all projects — and never appear in a project's Explorer (unlike numbl.org, which shows them under a system/ prefix). The mip core tooling is fetched in the background when the IDE opens; every run merges the system files into the interpreter's virtual file system and puts the mip directory on the search path, so mip load, mip install, mip list, etc. work as in the numbl CLI/IDE. Packages a script installs are written back to the system store after the run, so they're reused across runs, reloads, and projects. After 30 minutes of inactivity the store is wiped and mip core is re-fetched on next use (keeping the mutable mip-numbl release fresh); installed packages re-install on demand via mip load --install.

Development#

minwebide is consumed as a sibling checkout (file:../minwebide):

git clone https://github.com/magland/minwebide ../minwebide
(cd ../minwebide && npm install)   # fetches the pinned VS Code source
npm install
npm run dev
  • npm run build — static bundle in dist/
  • npm run typecheck — typechecks app code (vendor diagnostics suppressed)
  • npm run smoke — headless end-to-end test against the built bundle
  • bash scripts/generate-builtins.sh — refresh the syntax-highlighting builtin list after upgrading the numbl dependency

Cross-origin isolation: dev/preview servers send COOP/COEP headers so SharedArrayBuffer is available (numbl uses it for pause() timing). The deployed site gets the same via coi-serviceworker.js, injected into index.html only at build time — dev never registers a service worker.

CI checks out magland/minwebide next to this repo, installs both, builds, and publishes dist/ to GitHub Pages.

↑↓ move↵openescclose