{"id":26488,"library":"toad.js","title":"toad.js","description":"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.","status":"active","version":"0.3.4","language":"javascript","source_language":"en","source_url":"https://github.com/markandre13/toad.js","tags":["javascript"],"install":[{"cmd":"npm install toad.js","lang":"bash","label":"npm"},{"cmd":"yarn add toad.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add toad.js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only package; CommonJS require() fails.","wrong":"const Application = require('toad.js');","symbol":"Application","correct":"import { Application } from 'toad.js'"},{"note":"Models are in subpath 'toad.js/model', not root.","wrong":"import { TextModel } from 'toad.js'","symbol":"TextModel","correct":"import { TextModel } from 'toad.js/model'"},{"note":"Views are in subpath 'toad.js/view'.","wrong":"import { View } from 'toad.js'","symbol":"View","correct":"import { View } from 'toad.js/view'"}],"quickstart":{"code":"import { Application, Button, Dialog, Label, NumberModel, TextModel } from 'toad.js';\nimport { View } from 'toad.js/view';\n\nclass MyView extends View {\n  constructor() {\n    super();\n    this.count = new NumberModel(0);\n    this.label = new TextModel('Hello, TOAD!');\n  }\n\n  render() {\n    return `<div>\n      <label>${this.label.value}</label>\n      <button onclick=\"${this.onClick.bind(this)}\">Count: ${this.count.value}</button>\n    </div>`;\n  }\n\n  onClick() {\n    this.count.value++;\n    this.label.value = `Clicked ${this.count.value} times`;\n  }\n}\n\nconst app = new Application({\n  view: new MyView(),\n  title: 'TOAD Demo'\n});\napp.start();","lang":"typescript","description":"Creates a minimal TOAD application with a counter button and label using View and Models."},"warnings":[{"fix":"Use import syntax or dynamic import().","message":"ESM-only package — require() will throw ERR_REQUIRE_ESM","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Update Node to >=21.7.1.","message":"Minimum Node.js version is 21.7.1 — older Node fails with engine check","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Import from 'toad.js/model', 'toad.js/view', etc.","message":"Models and Views are in subpaths, not root package exports","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Pin to exact version and test upgrades.","message":"Package is pre-1.0 — API and import paths may change without semver major","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to dynamic import() or set type: module in package.json.","cause":"Using require() instead of import.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/toad.js/index.js from ... not supported."},{"fix":"Change import to: import { TextModel } from 'toad.js/model';","cause":"Importing TextModel from root instead of 'toad.js/model'.","error":"TypeError: toad_js_1.TextModel is not a constructor"},{"fix":"Ensure 'toad.js' is in package.json dependencies, and use correct case.","cause":"Package not installed or import path misspelled.","error":"Error: Cannot find module 'toad.js/model'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}