``` ↳ [Result](https://jsee.org/test/minimal1.html) ## Installation **Browser (CDN):** ```html ``` **npm (for CLI or Node.js projects):** ```bash npm install @jseeio/jsee ``` **CLI (generate standalone apps):** ```bash npx @jseeio/jsee schema.json -o app.html ``` Run `jsee --help` for all CLI options. ## Inputs and outputs JSEE works best with functional tasks and one-way flow from inputs to outputs (i.e., inputs → processing → outputs). You can also extend it to more complex scenarios, like inputs → preprocessing → updated inputs → processing → outputs or inputs → processing → outputs → custom renderer. Even though many computational tasks have a functional form, some problems require more complex interactions between a user interface and code. For such cases, JSEE is probably too constrained. That makes it not as universal as R's [shiny](https://shiny.rstudio.com/) or Python's [streamlit](https://streamlit.io/). ## How it works JSEE turns a JSON schema into a working web app. Instead of writing HTML, event handlers and output renderers, you describe `inputs`, `outputs` and a `model` in a single JSON object. JSEE reads that schema, generates a reactive Vue 3 GUI, loads dependencies, and runs your code in a Web Worker (or on the main thread, or as an API call). In many cases it can build the schema automatically by analysing a function's arguments. ```text Schema Model View/Render* Imports* DEV -► json js/py js js/css | | | | ┌──▼───────▼──────────▼────────────▼──┐ │ new JSEE(schema) │ │ ┌──────────────┐ ┌──────────────┐ │ │ │ Import loader │ │Schema parser │ │ │ └──────┬───────┘ └──────┬───────┘ │ └─────────┼─────────────────┼─────────┘ | | ┌──────▼──┐ ┌──────▼──────┐ ◄~ pyodide USER ◄-► │ GUI │ ◄--► │ Pipeline │ ◄~ tf.js │ Vue 3 │ │ Model(s) │ ◄~ wasm └─────────┘ └─────────────┘ WebWorker* * - optional ``` ### Initialization 1. **Schema** is loaded from a URL, DOM element, function, or JS object 2. **Validation** checks schema structure and logs warnings for issues 3. **Imports** are resolved — JS scripts are loaded in sequence, CSS files are injected as `` tags. In the browser, relative paths resolve against the page URL. In `--fetch` mode, the CLI checks the local filesystem first 4. **Models** initialize — code is loaded from `url`, `code`, or a hidden DOM cache (`data-src` elements used by `--fetch` bundles and `download()`) 5. **GUI** is created — a Vue 3 app with reactive inputs, output cards, run/stop buttons and progress bar 6. **URL params** are applied — query string values (`?name=value`) set matching inputs, including `alias` matches. File URL params auto-load on init ### Execution - **Run**: user clicks Run (or autorun/reactive triggers it). Inputs are collected and sent to the model - **Pipeline**: when `model` is an array, models execute sequentially — each receives the merged output of the previous one. Return `{ stop: true }` to halt early - **Worker context**: worker models receive a runtime context (`ctx`) with `ctx.log()`, `ctx.progress(value)` (0–100 or `null` for indeterminate), and `ctx.isCancelled()` for cooperative cancellation - **Cancellation**: `jsee.cancelCurrentRun()` or the Stop button sets a flag that workers and stream readers check - **Output**: results flow to the output cards — JSON trees, HTML, SVG, code blocks, or custom render functions ### Offline & bundling - **`jsee --fetch`** bundles everything into a single HTML file: the JSEE runtime, model/view/render code, and all imports are stored in hidden `