DartPad is an open-source tool that lets you play with the Dart language in any modern browser. Many pages in this site — especially codelabs — have embedded DartPads. To get a DartPad as big as your browser window, go to the DartPad site (dartpad.dev).

Here’s what DartPad looks like:

Library support

DartPad supports dart:* core libraries marked as multi-platform and web platform. It doesn’t support those marked native platform.

It also doesn’t support using packages from the pub.dev package repository.

Getting started

To get familiar with DartPad, try running some samples and then creating a simple command-line app.

Open DartPad, and run some samples

1. Go to DartPad.

   A sample appears on the left and the output appears on the right. If you’ve played with DartPad before, you can click New Pad to get back to the original sample.

2. Click Run.

   The sample runs again, updating the output.

3. Choose an HTML sample like Sunflower, using the Samples list at the upper right.

   Again, the output appears to the right. By default, you see the HTML output—what you’d see in a browser.

4. Click CONSOLE to view the sample’s console output.

5. On the left, click the HTML tab to view the sample’s HTML markup.

Create a command-line app

To create a simple command-line app, use New Pad.

1. Click the New Pad button, and confirm that you want to discard changes to the current pad.

   The source code for the Hello World app appears under the DART tab.

2. Turn off HTML, using the toggle underneath the Dart logo. The HTML and CSS tabs disappear.

3. Change the code. For example, change the main() function to contain this code:

   for (var char in 'hello'.split('')) {
     print(char);
   }

   As you type, DartPad shows hints, documentation, and autocomplete suggestions.

4. Click the Format button. DartPad uses the Dart formatter to ensure that your code has proper indentation, white space, and line wrapping.

5. Run your app.

6. If you didn’t happen to have any bugs while you were entering the code, try introducing a bug.

   For example, if you change split to spit, you get warnings at the bottom of the window and in the Run button. If you run the app, you’ll see output from an uncaught exception.

Checking Dart version info

The language features and APIs that DartPad supports depend on the Dart SDK version that DartPad is based on. You can find the SDK version at the bottom right of DartPad.

Embedding DartPad in web pages

You can embed DartPad inside of web pages, customizing it to suit your purpose. For example, the futures codelab contains multiple embedded DartPads labeled as examples and exercises.

For more information about how to use embedded DartPads, see best practices for using DartPad in tutorials.

For technical details on embedding DartPads, see the DartPad embedding guide.