# Quickstart (/docs/products/dash-dots/developers/quickstart)

In about ten minutes you'll have a dot running in your browser, with two pages. You need [Node.js](https://nodejs.org) 22.12 or newer and the [Monime CLI](/docs/developer-resources/cli/install).

1. **Create a dot**

   ```bash
   monime dot create my-dot
   ```

   The CLI asks for three things. The dot's name is what people see in Dash. The package name is a domain you own, written backwards: `sl.yourcompany.my-dot`. The suggested `com.example.my-dot` is fine for now. For the template, pick `starter`, which this quickstart builds on.

   Then the CLI offers to install the dot and start it. Either answer is fine.

2. **Run it in the simulator**

   If you said yes, the dot is already running. If you said no, run:

   ```bash
   cd my-dot
   npm install
   monime dot dev
   ```

   Open the address the terminal prints, usually `http://localhost:3680`, and there's your dot in a phone frame, with Dash's bars and menu. What only a phone can do, like opening the dialer, shows as a short note over the phone and a line in the browser's console.

   Leave the dot running. For the commands in the next steps, open a second terminal in the `my-dot` folder.

3. **Change a page**

   Open `pages/index/view.dml`, change some text and save. The simulator updates right away. If you break something, the terminal points you to the line.

4. **Add a page**

   ```bash
   monime dot create page receipt
   ```

   You get `pages/receipt/`, and the CLI adds `receipt` to `dot.ts`.

   Now add a button on the first page that opens it. Opening a page is an [action](/docs/products/dash-dots/developers/pages-and-state#actions), not a mutation:

   ```ts title="pages/index/controller.ts"
   export default definePage({
     // initialState and mutations stay as they are
     actions: {
       showReceipt() {
         this.navigation.push('receipt');
       },
     },
   });
   ```

   ```xml title="pages/index/view.dml"
   <Button onClick="showReceipt">See receipt</Button>
   ```

   See [Navigation](/docs/products/dash-dots/developers/navigation) for passing data to the page you open.

5. **Open it on your phone**

   Stop the dev server with Ctrl-C, then:

   ```bash
   monime dot keys create
   monime dot dev --device
   ```

   `keys create` makes a developer key, which your phone uses to trust this computer. You only do this once. In Dash on your phone, turn on **Enable Dot Debugging** in Developer Settings, tap **Live Test** on the Dots tab and scan the QR code in your terminal. [Run on a phone](/docs/products/dash-dots/developers/run-on-a-phone) has more.

6. **Build it**

   ```bash
   monime dot build
   ```

   The build checks your dot and puts it in `dist/`. When it's ready for customers, [publish it](/docs/products/dash-dots/developers/publish-and-release).

## Editor support

The Dot extension for VS Code gives `.dml` files highlighting, completion that includes your theme's own colors, gradients and icons, errors as you type, docs on hover and go to definition. It also works in Cursor and VSCodium.

1. [Download the Dot extension](/assets/downloads/dot-dml-0.1.1.vsix) (version 0.1.1, for VS Code 1.91 or newer).
2. In VS Code, open the Extensions view, click **…** at the top and choose **Install from VSIX…**, then pick the file. Or run `code --install-extension dot-dml-0.1.1.vsix`.

The extension uses the Dot tools installed in your dot, so it always matches the version your dot builds with. It needs Node.js 22.12 or newer on your `PATH`. To use another Node.js, set **Dot: Node Path** in VS Code's settings.

In other editors, set your editor to run `monime dot lsp --stdio` as its language server.