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 pre-compiled wasm worker and associated assets are available inside web/ in package:dartpad. You must extract and host these files to provide an absolute URL for DartPadSdk(assetBaseUrl: myUri).

Example

import 'package:dartpad/dartpad.dart';

Future<void> main() async {
  final sdk = DartPadSdk(
    // Absolute URL for files in web/ folder of package:dartpad
    assetBaseUrl: Uri.base.resolve('web/'),
  );

  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.