Quick Start



This guide provides basic instructions on installing the Alloy command-line interface (CLI) and creating a quick project.

Command-Line Interface Installation

For Titanium Studio 3.0.0 or greater, the Alloy command-line interface and plugin should be automatically installed by the studio installer. Refer to the Titanium Studio Quick Start Guide for instructions.

If there were installation problems or if you wish to install the CLI independent of the Titanium Studio installation, refer to the manual installation instructions below.

Manual Installation

Prerequisite: Titanium Studio 2.1.x or greater needs to be installed and configured before installing the Alloy CLI.

  1. Download and install Node.js, which includes the npm package manager needed to install Alloy.
  2. From a console window, run the following command to install Alloy:
$ sudo npm install -g alloy

By default, these installation directions will install the latest Alloy release. To install a specific released version, use the same directions, except after 'alloy', add the at symbol ('@') with the version number. For instance, executing sudo npm install -g alloy@0.2.35 will install version 0.2.35.

Bleeding Edge Installation

These directions will install the latest development changes.

After installing Node.js, clone the Alloy github repository and perform an npm install from the Alloy project's root directory:

$ git clone https://github.com/appcelerator/alloy.git
$ cd alloy
$ npm install -g .

Project Setup

Using Titanium Studio

Caveat: These instructions only work with Titanium Studio 3.0.0 and greater. For older versions of Titanium Studio, create a new Titanium project, then from a console window, run alloy new from the root directory of the project.

To create a new Alloy project, start Titanium Studio, then

  1. From the menu, select File > New > Titanium Project. The New Titanium Project dialog box will appear.
  2. Select "Alloy" in the Available Templates box, then click the Next button.
  3. Complete all of the fields, then click the Finish button.

A new skeleton Alloy project will be generated. Note that the Resources folder is hidden from the App and Project Explorer.

Using the CLI

Prerequisite: The Titanium CLI needs to be setup to create a Titanium skeleton project before installing the Alloy framework. See Titanium Command Line Interface for directions on how to setup and use the Titanium CLI.

To create a new Alloy project, using the CLI, in a console window, from the directory where you want to create your project, do

$ titanium create --name=appname --id=com.domain.appname --platform=android,ipad,iphone,mobileweb
$ cd appname
$ alloy new

A new skeleton Alloy project will be generated in the appname directory.

Simple Example

The following example converts the image_view_file.js file from the KitchenSink project to an Alloy project.

To see the example in the KitchenSink application, click on the Base UI tab, then navigate to Views > Images Views > Image File.


The view file declares the structure of the GUI. For example, the file below defines a window with an image and label.

Replace the contents of app/views/index.xml with the following:

		<ImageView id="imageView" onClick="clickImage"/>
		<Label id="l">Click Image of Apple Logo</Label>


The style file formats and styles the components in the view file. For example, the style below defines the background color of the window; position, dimensions and color of the label; and position, dimensions and location of the image.

Replace the contents of app/styles/index.tss with the following:

"Window": {
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"


The controller file contains the presentation logic, which responds to input from the user. For example, the controller code below create an alert dialog when the user clicks on the image and opens the window when the application starts.

Replace the contents of app/controllers/index.js with the following:

function clickImage(e) {
	Titanium.UI.createAlertDialog({title:'Image View', message:'You clicked me!'}).show();



Create a folder called app/asset/images and copy the apple_logo.jpg file from the KitchenSink project. This file will be copied to Resources/images/apple_logo.jpg by Alloy during the build process.

Compile and Run

Using Titanium Studio

Caveat: For the Mobile Web platform, compile the application using the CLI, then run it with Titanium Studio.

In the App Explorer view, click the Run button and select the device to launch the application. Alloy will generate the Titanium files from the Alloy project files, which will then be compiled by Titanium Studio and launched on the device simulator.

Using the CLI

Caveats: For the Mobile Web platform, run the application from Titanium Studio after compiling it. For the Android platform, you need to launch the emulator before executing the run command.

From a console window, go to the root directory of the project, then

$ alloy compile
$ alloy run [platform]