DartPad Documentation

The public API of dartpad_editor consists of several key functional areas:

• CodeMirror Integration: Provides CodeMirror editor and code-action integration. Note that the CodeMirror JavaScript bundle must be loaded (as described in the codemirror-dart package) before constructing a CodeMirrorEditor.
• Tab Management: Includes editor tab lifecycle and persistence controllers.
• Language Server Support: Handles Dart language-server diagnostics and workspace-edit processing.
• Workspace Management: Provides workspace resources and consolidated file-change events.

To coordinate editor state, a frontend must supply a concrete WorkspaceController and EditorTabAdapter, then use a TabsController to manage them.

To support Language Server Protocol (LSP) features, create one CodeMirrorLspClient per workspace.

1. Add the result of createExtension(uri) to each file's editor extensions.
2. Forward outbound JSON-RPC messages from sendToServer to the Dart Language Server.
3. Pass inbound messages from the Dart Language Server back to the client using receiveFromServer.

The DartPad Frontend uses a two-part rendering process:

1. Editor Shell: The first browser frame renders the initial editor UI.
2. DartPad Worker: A worker creates a transient in-memory Flutter project.

Once the workspace is available, lib/main.dart and pubspec.yaml are opened in reusable editor tabs. LSP (Language Server Protocol) initialization and pub get operations run in the background and do not block the workspace UI.

Editor Behavior:

• Saving: Ctrl/Cmd+S saves all dirty tabs and automatically formats Dart files.
• Closing Tabs: Closing a tab with unsaved changes (a 'dirty' tab) requires user confirmation.
• Reloading: Reloading the page resets the transient project.

To test code generation features locally, you must provide a Gemini API key via the GEMINI_API_KEY environment variable before starting the server.

export GEMINI_API_KEY=<YOUR_GEMINI_API_KEY>
dart bin/server.dart

To run the DartPad web UI locally, you can use the Flutter CLI or VS Code. When running via the CLI, you must pass the --disable-web-security flag to Chrome to bypass CORS issues related to resource manifests (like AssetManifest.json).

Using Flutter CLI

Run the following command:

flutter run -d chrome --web-browser-flag "--disable-web-security"

Using VS Code

1. Open the repository in VS Code.
2. Select the Run and Debug tab on the left sidebar.
3. Select the appropriate configuration and run it.

The dartpad_editor package provides building blocks for client-side DartPad, including CodeMirror editor integration, language-server diagnostics, and workspace management.

Note: This is a private workspace package and is not published to pub.dev.

To use the package, always import the package entrypoint rather than implementation files located under lib/src:

import 'package:dartpad_editor/dartpad_editor.dart';

To verify existing SDK assets (for CI or local verification) without rebuilding them, use the --validate-only flag with the asset building tool.

dart run tool/build_sdk_assets.dart --validate-only

Package dependencies are pinned in tool/dependencies/pub_dependencies_<CHANNEL>.yaml files. To add or remove supported packages, follow these steps for each Flutter channel (main, beta, and stable):

1. Switch to the channel: flutter channel <CHANNEL>
2. (Optional) Edit lib/src/project_templates.dart to update the whitelist of packages.
3. Regenerate project templates: dart tool/grind.dart build-project-templates.
4. If package resolution fails, manually edit the corresponding tool/dependencies/pub_dependencies_<CHANNEL>.yaml file.
5. Once project_templates/dart_project and project_templates/flutter_project are created, run pub upgrade in each directory.
6. Update the pinned dependencies: dart tool/grind.dart update-pub-dependencies.

You can run the DartPad Frontend project using the jaspr_cli package to serve the application locally.

dart run jaspr_cli:jaspr serve -v

The Dart Services server is a stateless Dart backend that powers DartPad. It provides features like static analysis, JavaScript compilation, code completion, dartdoc information, code formatting, and quick fixes. By default, the server runs on port 8080 and exposes JSON APIs such as /api/v3/analyze and /api/v3/compile.

dart bin/server.dart