Getting Started with Dart Editor

Follow this tutorial to install and use Dart Editor on Linux. Mac OS X. Windows.
(These instructions are available for , , and .)

Dart Editor is a lightweight, open-source editor based on Eclipse components. You can use it to edit and run Dart apps, as well as to invoke the Dart-to-JavaScript compiler.

The Dart Editor download includes:

  • Dart Editor
  • Dart SDK
  • "Dartium": a build of the Chromium browser that includes the Dart VM

Contents

Step 1: Download and install the software

In this step, you'll install Dart Editor and, if necessary, a Java runtime environment.

  1. Download and unzip the Dart Editor ZIP file. If you don't know whether to download the 32-bit or 64-bit version, see Getting your system architecture in the Troubleshooting page. If you don't know whether to download the 32-bit or 64-bit version, see Getting your system architecture in the Troubleshooting page.

    32-bit Dart Editor (Linux) 64-bit Dart Editor (Linux)
    Dart Editor (Mac)
    32-bit Dart Editor (Windows) 64-bit Dart Editor (Windows)

    After you unzip the archive, your Dart installation directory contains the DartEditor executable file and several subdirectories, including a samples directory.

  2. If you don't already have a Java runtime, download and install it.

    You can get JDK 7 from Java SE Development Kit 7 Downloads.

    • If you're using OS X Lion, see the download instructions at Java for OS X Lion.
    • If not, you should be fine; Java is pre-installed on OS versions before Lion.
    • You can download the Java runtime environment (JRE) from Java SE Downloads.
    • To avoid having to modify the PATH environment variable, you can install the JRE under your Dart installation directory, in a subdirectory named jre.

Step 2: Launch the editor

Go to your Dart installation directory, and double-click the DartEditor icon DartEditor icon.

You should see the Dart Editor application window appear, with a Welcome page that looks something like this:

screenshot of initial Dart Editor window, with Welcome page

Having problems? See Launching Dart Editor in the Troubleshooting page.

Step 3: Create and run an app

It's easy to create a simple web or server app from scratch. This step walks you through creating a server app.

  1. Click the New Application button New App (at the upper left of Dart Editor). Alternatively, choose File > New Application... from the Dart Editor menu. A dialog appears.

  2. Type in a name for your application—for example, HelloWorld. If you don't like the default directory, type in a new location or browse to choose the location.

  3. Select Server application in the sample content section. Then click Finish to create the initial files for the app.

    screenshot of the New Application dialog

    A default Dart file appears in the Edit view, and its directory appears in the Files view. Your Dart Editor window should look something like this:

    screenshot of Dart Editor just after New Application...

  4. Click the Run button Run to run your new app.

    For server apps, the output of print() appears at the bottom right, in a new tab next to the Problems tab.

Step 4: Open and run a sample

The Dart Editor bundle comes with several samples. In this step, you'll open a sample web app and run it in Dartium.

  1. Click the Welcome tab. Or choose Welcome Page from the Tools menu.

  2. In the Welcome tab, click the image labeled Sunflower.

    The Editor view now displays the contents of Sunflower.dart, and the Files view lists the files in the Sunflower app's directory. Dart Editor should look something like this:

    screenshot of Dart Editor displaying the Sunflower sample's code

  3. Click the Run button Run. Dart Editor launches Dartium, which displays sunflower.html.

  4. Move the slider to display the sunflower. For details about the Sunflower example, read the Sunflower Code Walkthrough.

    screenshot of Sunflower app running

Having problems? See Launching Dartium in the Troubleshooting page.

What next?

Now that you know the basics, you can learn more about Dart Editor and help improve it.

Become a power user

See the Dart Editor homepage for help on using Dart Editor's expanding feature set.

Send feedback!

Click the SEND FEEDBACK link (at the upper right of the Dart Editor window) whenever you notice a problem or have an idea for improving Dart Editor. We'll open a new issue for you, if appropriate, without disclosing your sensitive or personally identifiable information.

Or you can just create a new Dart Editor issue.