DartPad

package:dartpad is a library for building web applications that enable users to prototype Dart and Flutter in the browser.

This package provides the functionality for running a Dart or Flutter development environment in the browser. By enabling you launch and communicate with:

• A worker, a dart2wasm compiled Web Worker featuring:
  • An in-memory file system,
  • The Dart LSP server,
  • The Dart Development Compiler (DDC),
  • A subset of dart pub commands for dependency resolution.
• A Sandbox, an isolated iframe containing bootstrap code necessary to:
  • Run, hot-reload and hot-restart DDC compiled Dart code, and,
  • Proxy console output and unhandled exceptions out of the iframe.

To build a custom dartpad-like experience, you simply have to launch the worker, connect the language server to your editor, connect a sandboxed iframe and tell the sandbox what code to run, while presenting console output to the user.

Assets

To launch a Web Worker, the pre-compiled wasm worker and associated DartPad SDK assets must be created using dart run dartpad setup. You must host the generated directory and provide its URL to DartPadSdk(assetBaseUrl: myUri).

Example

import 'package:dartpad/dartpad.dart';

Future<void> main() async {
  final sdk = DartPadSdk(
    // URL where the DartPad SDK assets generated by `dart run dartpad setup`
    // are hosted.
    assetBaseUrl: Uri.base.resolve('dartpad_sdk/'),
  );

  final dartpad = await sdk.dedicatedWorker();
  final ws = await dartpad.createWorkspace();
  await ws.writeFileFromText(
    'main.dart',
    'void main() => print("hello world");',
  );
}

Limitations

As of writing there are no support for:

• Build hooks,
• Flutter plugins,
• Flutter assets,
• Code generation with build_runner.

It might be possible to support some of these features in the future.