Using Simten without React

@simten/react is the only UI package. You don't need it to use Simten. Pick by what you're doing.

Show a circuit on a page

Use the iframe embed. Open the circuit in the editor, click Share, pick Embed, and paste the snippet:

<iframe src="https://embed.simten.dev/s/abc123?theme=auto"
        style="width:100%; aspect-ratio:4/3; border:0"
        title="HalfAdder (Simten)" loading="lazy"></iframe>

It needs no package and no script, so it works where <script> is stripped: course platforms, Notion, most blog hosts. The circuit runs in its own frame, isolated from your page. Size it with plain CSS on the iframe; the canvas fills whatever box it gets. The options (theme, controls) are in Building custom UIs.

Your own UI, driven by a simulation

Use SimulationClient from @simten/sandbox. It has no framework, so it works from Vue, Svelte, Angular or no framework at all. Circuit source compiles and simulates in a worker inside a hidden iframe on another origin; your page sends requests and gets state back.

npm install @simten/sandbox @simten/core

import { SandboxClient } from '@simten/sandbox';

const sandbox = new SandboxClient();
const compiled = await sandbox.compile(source);
const sim = await sandbox.open({ compiled, circuit: 'Counter' });

await sim.set({ en: 1 });
await sim.tick(10);
sim.get('count'); // 10

sim.subscribe(() => render(sim.getState()));
await sim.run(30); // 30 cycles a second, in the worker

SimulationClient has the same methods as core's Simulation, returning promises, plus run and pause for auto-run, and close. Its set takes input port names and Switch and Input paths, like core's. Call close() when your component unmounts, and dispose() on the SandboxClient when you're done with the sandbox. The full list is in the package README.

Wiring this into a framework is a small adapter: subscribe in the component's mount hook, copy getState() into the framework's state, and close on unmount. That is all useSimulation in @simten/react does on top of it. There are no Vue or Svelte packages yet.

Your own circuits, headless

For circuits you wrote or trust, run them directly with simulate() from @simten/core: in Node, in tests, in CI, or in a script.

import { simulate } from '@simten/core';
import { Counter } from './counter.circuit';

const sim = simulate(Counter);
sim.set({ en: 1 });
sim.tick(10);
sim.get('count'); // 10

This runs the circuit's code in your process, with no sandbox. Don't use it in a browser page for source text from someone else; use @simten/sandbox for that.