Learn Draftbit - 10 Code Examples & CST Typing Practice Test

Draftbit is a no-code and low-code visual builder for creating React Native mobile apps. It allows designers, founders, and developers to visually build screens, components, and navigation flows, while exporting clean React Native code.

View all 10 Draftbit code examples →

Draftbit Simple Todo App Draftbit Expense Tracker Draftbit Notes App Draftbit Weather Viewer Draftbit Fitness Tracker Draftbit Shopping List Draftbit Habit Tracker Draftbit Recipe Book Draftbit Simple Login Screen Draftbit Counter App

Learn DRAFTBIT with Real Code Examples

Updated Nov 24, 2025

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

Code Sample Descriptions

Draftbit Simple Todo App

// Visual components setup in Draftbit
// Example of custom React Native code for adding a todo
import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';

export default function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');

    const addTodo = () => {
        if(input.trim()){
        setTodos([...todos, input.trim()]);
        setInput('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput value={input} onChangeText={setInput} placeholder='New Todo' />
        <Button title='Add' onPress={addTodo} />
        <FlatList data={todos} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Demonstrates a simple Draftbit app with a Todo list, adding tasks, and displaying them using visual components and optional custom React Native code.

Let’s Try →

Draftbit Expense Tracker

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ExpenseTracker() {
    const [expenses, setExpenses] = useState([]);
    const [amount, setAmount] = useState('');
    const [desc, setDesc] = useState('');

    const addExpense = () => {
        if(amount && desc){
        setExpenses([...expenses, { amount, desc }]);
        setAmount('');
        setDesc('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Description' value={desc} onChangeText={setDesc} />
        <TextInput placeholder='Amount' keyboardType='numeric' value={amount} onChangeText={setAmount} />
        <Button title='Add Expense' onPress={addExpense} />
        <FlatList data={expenses} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item.desc}: ${item.amount}</Text>} />
        </View>
    );
}

Tracks daily expenses with visual Draftbit forms and stores entries locally using React Native state.

Let’s Try →

Draftbit Notes App

import React, { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';

export default function NotesApp() {
    const [note, setNote] = useState('');
    const [notes, setNotes] = useState([]);

    const addNote = () => {
        if(note.trim()){
        setNotes([...notes, note]);
        setNote('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Write a note...' value={note} onChangeText={setNote} />
        <Button title='Add Note' onPress={addNote} />
        <ScrollView>{notes.map((n, i) => <Text key={i}>{n}</Text>)}</ScrollView>
        </View>
    );
}

A simple note-taking app using Draftbit visual input components and local state to store text notes.

Let’s Try →

Draftbit Weather Viewer

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

export default function WeatherApp() {
    const [city, setCity] = useState('');
    const [weather, setWeather] = useState(null);

    const fetchWeather = async () => {
        const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
        const data = await res.json();
        setWeather(data.current);
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Enter City' value={city} onChangeText={setCity} />
        <Button title='Get Weather' onPress={fetchWeather} />
        {weather && <Text>Temp: {weather.temp_c}°C</Text>}
        </View>
    );
}

Fetches weather data using a public API and displays it in a Draftbit app layout.

Let’s Try →

Draftbit Fitness Tracker

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function FitnessTracker() {
    const [activity, setActivity] = useState('');
    const [activities, setActivities] = useState([]);

    const addActivity = () => {
        if(activity.trim()){
        setActivities([...activities, activity]);
        setActivity('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Workout name' value={activity} onChangeText={setActivity} />
        <Button title='Add Workout' onPress={addActivity} />
        <FlatList data={activities} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Tracks workouts using simple inputs and displays a list of activities added by the user.

Let’s Try →

Draftbit Shopping List

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ShoppingList() {
    const [item, setItem] = useState('');
    const [list, setList] = useState([]);

    const addItem = () => {
        if(item.trim()){
        setList([...list, item]);
        setItem('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Add Item' value={item} onChangeText={setItem} />
        <Button title='Add' onPress={addItem} />
        <FlatList data={list} keyExtractor={(i, idx) => idx.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Creates a shopping list using Draftbit UI components and React Native state hooks.

Let’s Try →

Draftbit Habit Tracker

import React, { useState } from 'react';
import { View, Text, Switch } from 'react-native';

export default function HabitTracker() {
    const [habits, setHabits] = useState([
        { name: 'Drink Water', done: false },
        { name: 'Exercise', done: false }
    ]);

    const toggleHabit = index => {
        const updated = [...habits];
        updated[index].done = !updated[index].done;
        setHabits(updated);
    };

    return (
        <View style={{ padding: 20 }}>
        {habits.map((h, i) => (
        <View key={i} style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 5 }}>
        <Text style={{ flex: 1 }}>{h.name}</Text>
        <Switch value={h.done} onValueChange={() => toggleHabit(i)} />
        </View>
        ))}
        </View>
    );
}

Tracks daily habits with checkmarks using visual Draftbit switches and React Native state.

Let’s Try →

Draftbit Recipe Book

import React, { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';

export default function RecipeBook() {
    const [title, setTitle] = useState('');
    const [recipes, setRecipes] = useState([]);

    const addRecipe = () => {
        if(title.trim()){
        setRecipes([...recipes, title]);
        setTitle('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Recipe Name' value={title} onChangeText={setTitle} />
        <Button title='Add Recipe' onPress={addRecipe} />
        <ScrollView>{recipes.map((r, i) => <Text key={i}>{r}</Text>)}</ScrollView>
        </View>
    );
}

Stores simple recipes with ingredients and steps using local state, designed with Draftbit visual cards.

Let’s Try →

Draftbit Simple Login Screen

import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';

export default function LoginScreen() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
        if(email && password){
        Alert.alert('Login Successful', email);
        }else{
        Alert.alert('Please fill all fields');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Email' value={email} onChangeText={setEmail} />
        <TextInput placeholder='Password' value={password} secureTextEntry onChangeText={setPassword} />
        <Button title='Login' onPress={handleLogin} />
        </View>
    );
}

Implements a simple login form UI using Draftbit visual inputs and a basic state check.

Let’s Try →

Draftbit Counter App

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function CounterApp() {
    const [count, setCount] = useState(0);

    return (
        <View style={{ padding: 20, alignItems: 'center' }}>
        <Text style={{ fontSize: 24 }}>Count: {count}</Text>
        <Button title='Increment' onPress={() => setCount(count + 1)} />
        <Button title='Decrement' onPress={() => setCount(count - 1)} />
        </View>
    );
}

A simple counter using React Native state hooks, great for Draftbit logic demonstration.

Let’s Try →

Frequently Asked Questions about Draftbit

What is Draftbit?

What are the primary use cases for Draftbit?

MVP mobile app creation. React Native UI design and prototyping. API-driven mobile applications. Startup app development. Apps requiring code export for custom development

What are the strengths of Draftbit?

Clean, production-ready React Native code export. Fast visual UI creation. Ideal for MVPs and prototypes. Flexible for developers and non-developers. Integrates with any REST API or backend service

What are the limitations of Draftbit?

No backend included (requires external APIs). More complex logic requires code export. Learning curve for non-technical users. Limited offline-first capabilities. Advanced animations may require manual coding

How can I practice Draftbit typing speed?

CodeSpeedTest offers 10+ real Draftbit 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

Draftbit Simple Todo App

// Visual components setup in Draftbit
// Example of custom React Native code for adding a todo
import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';

export default function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');

    const addTodo = () => {
        if(input.trim()){
        setTodos([...todos, input.trim()]);
        setInput('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput value={input} onChangeText={setInput} placeholder='New Todo' />
        <Button title='Add' onPress={addTodo} />
        <FlatList data={todos} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Demonstrates a simple Draftbit app with a Todo list, adding tasks, and displaying them using visual components and optional custom React Native code.

Let’s Try →

Draftbit Expense Tracker

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ExpenseTracker() {
    const [expenses, setExpenses] = useState([]);
    const [amount, setAmount] = useState('');
    const [desc, setDesc] = useState('');

    const addExpense = () => {
        if(amount && desc){
        setExpenses([...expenses, { amount, desc }]);
        setAmount('');
        setDesc('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Description' value={desc} onChangeText={setDesc} />
        <TextInput placeholder='Amount' keyboardType='numeric' value={amount} onChangeText={setAmount} />
        <Button title='Add Expense' onPress={addExpense} />
        <FlatList data={expenses} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item.desc}: ${item.amount}</Text>} />
        </View>
    );
}

Tracks daily expenses with visual Draftbit forms and stores entries locally using React Native state.

Let’s Try →

Draftbit Notes App

import React, { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';

export default function NotesApp() {
    const [note, setNote] = useState('');
    const [notes, setNotes] = useState([]);

    const addNote = () => {
        if(note.trim()){
        setNotes([...notes, note]);
        setNote('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Write a note...' value={note} onChangeText={setNote} />
        <Button title='Add Note' onPress={addNote} />
        <ScrollView>{notes.map((n, i) => <Text key={i}>{n}</Text>)}</ScrollView>
        </View>
    );
}

A simple note-taking app using Draftbit visual input components and local state to store text notes.

Let’s Try →

Draftbit Weather Viewer

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

export default function WeatherApp() {
    const [city, setCity] = useState('');
    const [weather, setWeather] = useState(null);

    const fetchWeather = async () => {
        const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
        const data = await res.json();
        setWeather(data.current);
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Enter City' value={city} onChangeText={setCity} />
        <Button title='Get Weather' onPress={fetchWeather} />
        {weather && <Text>Temp: {weather.temp_c}°C</Text>}
        </View>
    );
}

Fetches weather data using a public API and displays it in a Draftbit app layout.

Let’s Try →

Draftbit Fitness Tracker

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function FitnessTracker() {
    const [activity, setActivity] = useState('');
    const [activities, setActivities] = useState([]);

    const addActivity = () => {
        if(activity.trim()){
        setActivities([...activities, activity]);
        setActivity('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Workout name' value={activity} onChangeText={setActivity} />
        <Button title='Add Workout' onPress={addActivity} />
        <FlatList data={activities} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Tracks workouts using simple inputs and displays a list of activities added by the user.

Let’s Try →

Draftbit Shopping List

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ShoppingList() {
    const [item, setItem] = useState('');
    const [list, setList] = useState([]);

    const addItem = () => {
        if(item.trim()){
        setList([...list, item]);
        setItem('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Add Item' value={item} onChangeText={setItem} />
        <Button title='Add' onPress={addItem} />
        <FlatList data={list} keyExtractor={(i, idx) => idx.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Creates a shopping list using Draftbit UI components and React Native state hooks.

Let’s Try →

Draftbit Habit Tracker

import React, { useState } from 'react';
import { View, Text, Switch } from 'react-native';

export default function HabitTracker() {
    const [habits, setHabits] = useState([
        { name: 'Drink Water', done: false },
        { name: 'Exercise', done: false }
    ]);

    const toggleHabit = index => {
        const updated = [...habits];
        updated[index].done = !updated[index].done;
        setHabits(updated);
    };

    return (
        <View style={{ padding: 20 }}>
        {habits.map((h, i) => (
        <View key={i} style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 5 }}>
        <Text style={{ flex: 1 }}>{h.name}</Text>
        <Switch value={h.done} onValueChange={() => toggleHabit(i)} />
        </View>
        ))}
        </View>
    );
}

Tracks daily habits with checkmarks using visual Draftbit switches and React Native state.

Let’s Try →

Draftbit Recipe Book

import React, { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';

export default function RecipeBook() {
    const [title, setTitle] = useState('');
    const [recipes, setRecipes] = useState([]);

    const addRecipe = () => {
        if(title.trim()){
        setRecipes([...recipes, title]);
        setTitle('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Recipe Name' value={title} onChangeText={setTitle} />
        <Button title='Add Recipe' onPress={addRecipe} />
        <ScrollView>{recipes.map((r, i) => <Text key={i}>{r}</Text>)}</ScrollView>
        </View>
    );
}

Stores simple recipes with ingredients and steps using local state, designed with Draftbit visual cards.

Let’s Try →

Draftbit Simple Login Screen

import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';

export default function LoginScreen() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
        if(email && password){
        Alert.alert('Login Successful', email);
        }else{
        Alert.alert('Please fill all fields');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Email' value={email} onChangeText={setEmail} />
        <TextInput placeholder='Password' value={password} secureTextEntry onChangeText={setPassword} />
        <Button title='Login' onPress={handleLogin} />
        </View>
    );
}

Implements a simple login form UI using Draftbit visual inputs and a basic state check.

Let’s Try →

Draftbit Counter App

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function CounterApp() {
    const [count, setCount] = useState(0);

    return (
        <View style={{ padding: 20, alignItems: 'center' }}>
        <Text style={{ fontSize: 24 }}>Count: {count}</Text>
        <Button title='Increment' onPress={() => setCount(count + 1)} />
        <Button title='Decrement' onPress={() => setCount(count - 1)} />
        </View>
    );
}

A simple counter using React Native state hooks, great for Draftbit logic demonstration.

Let’s Try →

Frequently Asked Questions about Draftbit

What is Draftbit?

What are the primary use cases for Draftbit?

MVP mobile app creation. React Native UI design and prototyping. API-driven mobile applications. Startup app development. Apps requiring code export for custom development

What are the strengths of Draftbit?

Clean, production-ready React Native code export. Fast visual UI creation. Ideal for MVPs and prototypes. Flexible for developers and non-developers. Integrates with any REST API or backend service

What are the limitations of Draftbit?

How can I practice Draftbit typing speed?

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