JavaScript Interop and Dart on the Web

42.1 dart:js_interop (Modern, Works with JS and Wasm)

Conversions: .toJS / .toDart for strings, numbers, lists, promises, and functions ((() => print('x')).toJS).

dart:html, dart:js, and package:js are legacy (not supported with Wasm). Migrate to package:web + dart:js_interop.

import 'dart:js_interop';
import 'package:web/web.dart' as web;      // typed browser APIs (replaces dart:html)

@JS('console.log')
external void consoleLog(JSAny? value);

@JS()
external JSPromise<JSString> fetchGreeting(JSString name);   // a global JS function

extension type Chart._(JSObject _) implements JSObject {    // wrap a JS library type
  external Chart(web.HTMLCanvasElement canvas, JSObject config);
  external void update();
}

Future<void> main() async {
  consoleLog('Hello from Dart'.toJS);
  final button = web.document.createElement('button') as web.HTMLButtonElement
    ..textContent = 'Click me'
    ..onClick.listen((_) => web.window.alert('Clicked!'));
  web.document.body!.append(button);

  final greeting = await fetchGreeting('Ana'.toJS).toDart;
  print(greeting.toDart);
}

42.2 Web Frameworks and Tools

Flutter Web (CanvasKit/Skwasm renderers, Wasm builds), Jaspr (a component framework rendering HTML, with SSR and static sites), ngdart (a community AngularDart fork), the webdev tool (webdev serve, webdev build), and dart create -t web.