Learn Titanium-appcelerator - 9 Code Examples & CST Typing Practice Test

Titanium Appcelerator is an open-source mobile development framework that allows developers to build native iOS and Android apps using JavaScript, providing a single codebase for multiple platforms.

View all 9 Titanium-appcelerator code examples →

Titanium Appcelerator Simple Todo App Titanium Counter App Titanium Todo App With Delete Titanium Dark Mode Counter Titanium Multi Counter App Titanium Auto Increment Counter Titanium Todo With Priority Titanium Countdown Timer Titanium Counter With Alert

Learn TITANIUM-APPCELERATOR with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Titanium Appcelerator Simple Todo App

// app.js
var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var addButton = Ti.UI.createButton({top:100, title:'Add'});
var listView = Ti.UI.createTableView({top:150, data:[]});

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim()});
        todoInput.value = '';
        listView.data = todos;
    }
});

win.add(todoInput);
win.add(addButton);
win.add(listView);
win.open();

Demonstrates a simple Titanium app with a Todo list, adding tasks, and displaying them using native UI components.

Let’s Try →

Titanium Counter App

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var decButton = Ti.UI.createButton({title:'-', top:150});
var resetButton = Ti.UI.createButton({title:'Reset', top:200});

incButton.addEventListener('click', function(){
    count++;
    label.text = 'Counter: ' + count;
});

decButton.addEventListener('click', function(){
    count--;
    label.text = 'Counter: ' + count;
});

resetButton.addEventListener('click', function(){
    count = 0;
    label.text = 'Counter: ' + count;
});

win.add(label);
win.add(incButton);
win.add(decButton);
win.add(resetButton);
win.open();

A simple counter app using Titanium UI with increment, decrement, and reset buttons.

Let’s Try →

Titanium Todo App With Delete

var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var addButton = Ti.UI.createButton({top:100, title:'Add'});
var listView = Ti.UI.createTableView({top:150, data:[]});

function refreshList(){
    listView.data = todos.map(function(todo, i){
        var row = Ti.UI.createTableViewRow({title:todo.title});
        row.addEventListener('click', function(){
        todos.splice(i,1);
        refreshList();
        });
        return row;
    });
}

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim()});
        todoInput.value = '';
        refreshList();
    }
});

win.add(todoInput);
win.add(addButton);
win.add(listView);
win.open();

Todo app with delete functionality for each task.

Let’s Try →

Titanium Dark Mode Counter

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;
var isDark = false;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var decButton = Ti.UI.createButton({title:'-', top:150});
var resetButton = Ti.UI.createButton({title:'Reset', top:200});
var themeButton = Ti.UI.createButton({title:'Toggle Theme', top:250});

incButton.addEventListener('click', function(){
    count++;
    label.text = 'Counter: ' + count;
});

decButton.addEventListener('click', function(){
    count--;
    label.text = 'Counter: ' + count;
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

themeButton.addEventListener('click', function(){
    isDark = !isDark;
    win.backgroundColor = isDark ? 'black' : 'white';
    label.color = isDark ? 'white' : 'black';
});

win.add(label);
win.add(incButton);
win.add(decButton);
win.add(resetButton);
win.add(themeButton);
win.open();

Counter app with dark/light mode toggle using Titanium UI.

Let’s Try →

Titanium Multi Counter App

var win = Ti.UI.createWindow({backgroundColor:'white'});
var counters = [0,0,0];

counters.forEach(function(count,i){
    var label = Ti.UI.createLabel({text:'Counter ' + (i+1) + ': 0', top:50+i*100, font:{fontSize:20}});
    var inc = Ti.UI.createButton({title:'+', top:80+i*100, left:50});
    var dec = Ti.UI.createButton({title:'-', top:80+i*100, left:120});

    inc.addEventListener('click', function(){
        counters[i]++;
        label.text = 'Counter ' + (i+1) + ': ' + counters[i];
    });
    dec.addEventListener('click', function(){
        counters[i]--;
        label.text = 'Counter ' + (i+1) + ': ' + counters[i];
    });

    win.add(label);
    win.add(inc);
    win.add(dec);
});

win.open();

Multiple independent counters in one window.

Let’s Try →

Titanium Auto Increment Counter

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var pauseButton = Ti.UI.createButton({title:'Pause/Resume', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

var isRunning = true;
var interval = setInterval(function(){
    if(isRunning){
        count++;
        label.text = 'Counter: ' + count;
    }
},1000);

pauseButton.addEventListener('click', function(){
    isRunning = !isRunning;
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

win.add(label);
win.add(pauseButton);
win.add(resetButton);
win.open();

Counter that automatically increments every second.

Let’s Try →

Titanium Todo With Priority

var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var priorityInput = Ti.UI.createTextField({top:90, width:200, hintText:'Priority'});
var addButton = Ti.UI.createButton({top:130, title:'Add'});
var listView = Ti.UI.createTableView({top:170, data:[]});

function refreshList(){
    listView.data = todos.map(function(todo){
        return Ti.UI.createTableViewRow({title:todo.title + ' (Priority: ' + todo.priority + ')'});
    });
}

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim(), priority: priorityInput.value.trim()});
        todoInput.value=''; priorityInput.value='';
        refreshList();
    }
});

win.add(todoInput);
win.add(priorityInput);
win.add(addButton);
win.add(listView);
win.open();

Todo app where each task has a priority and displays it.

Let’s Try →

Titanium Countdown Timer

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 10;

var label = Ti.UI.createLabel({text:'Time: 10', top:50, font:{fontSize:24}});
var startButton = Ti.UI.createButton({title:'Start', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

var timer;
startButton.addEventListener('click', function(){
    clearInterval(timer);
    timer = setInterval(function(){
        if(count>0) { count--; label.text='Time: ' + count; }
    },1000);
});

resetButton.addEventListener('click', function(){
    clearInterval(timer);
    count=10;
    label.text='Time: ' + count;
});

win.add(label);
win.add(startButton);
win.add(resetButton);
win.open();

Countdown timer starting from 10 seconds.

Let’s Try →

Titanium Counter With Alert

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

incButton.addEventListener('click', function(){
    count++;
    label.text='Counter: ' + count;
    if(count===10){
        Ti.UI.createAlertDialog({title:'Alert', message:'Count reached 10!'}).show();
    }
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

win.add(label);
win.add(incButton);
win.add(resetButton);
win.open();

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Titanium-appcelerator

What is Titanium-appcelerator?

Titanium Appcelerator is an open-source mobile development framework that allows developers to build native iOS and Android apps using JavaScript, providing a single codebase for multiple platforms.

What are the primary use cases for Titanium-appcelerator?

Cross-platform native mobile apps (iOS and Android). Enterprise mobile applications. Mobile apps requiring deep native API integration. Rapid prototyping of mobile solutions. Single codebase development for multiple platforms

What are the strengths of Titanium-appcelerator?

Single JavaScript codebase for iOS and Android. True native UI performance. Access to almost all native device APIs. Structured app development via Alloy. Large ecosystem of community modules

What are the limitations of Titanium-appcelerator?

Limited support for web or desktop apps. Learning curve for Alloy MVC and Titanium APIs. Some platform-specific bugs or inconsistencies. Smaller community compared to React Native or Ionic. Updates tied to Titanium SDK releases

How can I practice Titanium-appcelerator typing speed?

CodeSpeedTest offers 9+ real Titanium-appcelerator code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Titanium Appcelerator Simple Todo App

// app.js
var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var addButton = Ti.UI.createButton({top:100, title:'Add'});
var listView = Ti.UI.createTableView({top:150, data:[]});

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim()});
        todoInput.value = '';
        listView.data = todos;
    }
});

win.add(todoInput);
win.add(addButton);
win.add(listView);
win.open();

Demonstrates a simple Titanium app with a Todo list, adding tasks, and displaying them using native UI components.

Let’s Try →

Titanium Counter App

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var decButton = Ti.UI.createButton({title:'-', top:150});
var resetButton = Ti.UI.createButton({title:'Reset', top:200});

incButton.addEventListener('click', function(){
    count++;
    label.text = 'Counter: ' + count;
});

decButton.addEventListener('click', function(){
    count--;
    label.text = 'Counter: ' + count;
});

resetButton.addEventListener('click', function(){
    count = 0;
    label.text = 'Counter: ' + count;
});

win.add(label);
win.add(incButton);
win.add(decButton);
win.add(resetButton);
win.open();

A simple counter app using Titanium UI with increment, decrement, and reset buttons.

Let’s Try →

Titanium Todo App With Delete

var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var addButton = Ti.UI.createButton({top:100, title:'Add'});
var listView = Ti.UI.createTableView({top:150, data:[]});

function refreshList(){
    listView.data = todos.map(function(todo, i){
        var row = Ti.UI.createTableViewRow({title:todo.title});
        row.addEventListener('click', function(){
        todos.splice(i,1);
        refreshList();
        });
        return row;
    });
}

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim()});
        todoInput.value = '';
        refreshList();
    }
});

win.add(todoInput);
win.add(addButton);
win.add(listView);
win.open();

Todo app with delete functionality for each task.

Let’s Try →

Titanium Dark Mode Counter

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;
var isDark = false;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var decButton = Ti.UI.createButton({title:'-', top:150});
var resetButton = Ti.UI.createButton({title:'Reset', top:200});
var themeButton = Ti.UI.createButton({title:'Toggle Theme', top:250});

incButton.addEventListener('click', function(){
    count++;
    label.text = 'Counter: ' + count;
});

decButton.addEventListener('click', function(){
    count--;
    label.text = 'Counter: ' + count;
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

themeButton.addEventListener('click', function(){
    isDark = !isDark;
    win.backgroundColor = isDark ? 'black' : 'white';
    label.color = isDark ? 'white' : 'black';
});

win.add(label);
win.add(incButton);
win.add(decButton);
win.add(resetButton);
win.add(themeButton);
win.open();

Counter app with dark/light mode toggle using Titanium UI.

Let’s Try →

Titanium Multi Counter App

var win = Ti.UI.createWindow({backgroundColor:'white'});
var counters = [0,0,0];

counters.forEach(function(count,i){
    var label = Ti.UI.createLabel({text:'Counter ' + (i+1) + ': 0', top:50+i*100, font:{fontSize:20}});
    var inc = Ti.UI.createButton({title:'+', top:80+i*100, left:50});
    var dec = Ti.UI.createButton({title:'-', top:80+i*100, left:120});

    inc.addEventListener('click', function(){
        counters[i]++;
        label.text = 'Counter ' + (i+1) + ': ' + counters[i];
    });
    dec.addEventListener('click', function(){
        counters[i]--;
        label.text = 'Counter ' + (i+1) + ': ' + counters[i];
    });

    win.add(label);
    win.add(inc);
    win.add(dec);
});

win.open();

Multiple independent counters in one window.

Let’s Try →

Titanium Auto Increment Counter

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var pauseButton = Ti.UI.createButton({title:'Pause/Resume', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

var isRunning = true;
var interval = setInterval(function(){
    if(isRunning){
        count++;
        label.text = 'Counter: ' + count;
    }
},1000);

pauseButton.addEventListener('click', function(){
    isRunning = !isRunning;
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

win.add(label);
win.add(pauseButton);
win.add(resetButton);
win.open();

Counter that automatically increments every second.

Let’s Try →

Titanium Todo With Priority

var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var priorityInput = Ti.UI.createTextField({top:90, width:200, hintText:'Priority'});
var addButton = Ti.UI.createButton({top:130, title:'Add'});
var listView = Ti.UI.createTableView({top:170, data:[]});

function refreshList(){
    listView.data = todos.map(function(todo){
        return Ti.UI.createTableViewRow({title:todo.title + ' (Priority: ' + todo.priority + ')'});
    });
}

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim(), priority: priorityInput.value.trim()});
        todoInput.value=''; priorityInput.value='';
        refreshList();
    }
});

win.add(todoInput);
win.add(priorityInput);
win.add(addButton);
win.add(listView);
win.open();

Todo app where each task has a priority and displays it.

Let’s Try →

Titanium Countdown Timer

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 10;

var label = Ti.UI.createLabel({text:'Time: 10', top:50, font:{fontSize:24}});
var startButton = Ti.UI.createButton({title:'Start', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

var timer;
startButton.addEventListener('click', function(){
    clearInterval(timer);
    timer = setInterval(function(){
        if(count>0) { count--; label.text='Time: ' + count; }
    },1000);
});

resetButton.addEventListener('click', function(){
    clearInterval(timer);
    count=10;
    label.text='Time: ' + count;
});

win.add(label);
win.add(startButton);
win.add(resetButton);
win.open();

Countdown timer starting from 10 seconds.

Let’s Try →

Titanium Counter With Alert

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

incButton.addEventListener('click', function(){
    count++;
    label.text='Counter: ' + count;
    if(count===10){
        Ti.UI.createAlertDialog({title:'Alert', message:'Count reached 10!'}).show();
    }
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

win.add(label);
win.add(incButton);
win.add(resetButton);
win.open();

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Titanium-appcelerator

What is Titanium-appcelerator?

Titanium Appcelerator is an open-source mobile development framework that allows developers to build native iOS and Android apps using JavaScript, providing a single codebase for multiple platforms.

What are the primary use cases for Titanium-appcelerator?

What are the strengths of Titanium-appcelerator?

Single JavaScript codebase for iOS and Android. True native UI performance. Access to almost all native device APIs. Structured app development via Alloy. Large ecosystem of community modules

What are the limitations of Titanium-appcelerator?

How can I practice Titanium-appcelerator typing speed?

CodeSpeedTest offers 9+ real Titanium-appcelerator code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.