toad.js

library0.3.4jsnpmunverified

toad.js is a TypeScript GUI library for building desktop-style web applications using modern web technologies. Version 0.3.4 (March 2025) is in early development with weekly releases. It enforces a layered architecture (DDD/Clean Architecture) with Presentation Model pattern, focused on complex data-driven apps with large screens. Unlike React/Vue, it has no virtual DOM, no mobile support, and no eye candy — targeting pro users with consistent UIs. Requires Node >=21.7.1 and ESM only.

web-framework

npm install toad.js

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TOAD.JS

toad.js

web-frameworkjavascriptv0.3.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Application

✓ import { Application } from 'toad.js'

✗ const Application = require('toad.js');

ESM-only package; CommonJS require() fails.

TextModel

✓ import { TextModel } from 'toad.js/model'

✗ import { TextModel } from 'toad.js'

Models are in subpath 'toad.js/model', not root.

View

✓ import { View } from 'toad.js/view'

✗ import { View } from 'toad.js'

Views are in subpath 'toad.js/view'.

Creates a minimal TOAD application with a counter button and label using View and Models.

import { Application, Button, Dialog, Label, NumberModel, TextModel } from 'toad.js'; import { View } from 'toad.js/view'; class MyView extends View { constructor() { super(); this.count = new NumberModel(0); this.label = new TextModel('Hello, TOAD!'); } render() { return `<div> <label>${this.label.value}</label> <button onclick="${this.onClick.bind(this)}">Count: ${this.count.value}</button> </div>`; } onClick() { this.count.value++; this.label.value = `Clicked ${this.count.value} times`; } } const app = new Application({ view: new MyView(), title: 'TOAD Demo' }); app.start();

Debug

Known issues

breakingESM-only package — require() will throw ERR_REQUIRE_ESM

fix

Use import syntax or dynamic import().

affects: >=0.3.0

breakingMinimum Node.js version is 21.7.1 — older Node fails with engine check

fix

Update Node to >=21.7.1.

affects: >=0.3.0

gotchaModels and Views are in subpaths, not root package exports

fix

Import from 'toad.js/model', 'toad.js/view', etc.

affects: >=0.3.0

gotchaPackage is pre-1.0 — API and import paths may change without semver major

fix

Pin to exact version and test upgrades.

affects: >=0.1.0

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/toad.js/index.js from ... not supported.

Using require() instead of import.

fix

Change to dynamic import() or set type: module in package.json.

TypeError: toad_js_1.TextModel is not a constructor

Importing TextModel from root instead of 'toad.js/model'.

fix

Change import to: import { TextModel } from 'toad.js/model';

Error: Cannot find module 'toad.js/model'

Package not installed or import path misspelled.

fix

Ensure 'toad.js' is in package.json dependencies, and use correct case.

Upgrade

Version history

0.3.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/markandre13/toad.js ↗

packagehttps://www.npmjs.com/package/toad.js ↗

homepagehttps://toad.js.org ↗