Learn THUNKABLE with Real Code Examples

1. Drag a Text Input component onto the screen for 'New Todo'.
2. Drag a Button labeled 'Add' and configure its logic blocks:
    - Append input value to list variable 'todos'.
3. Drag a List Viewer component bound to 'todos' to display items.
4. Configure blocks to reset input after adding and optionally delete items.
5. Preview live on device or web, and publish to iOS or Android.

Demonstrates a simple Thunkable app with a Todo list, adding tasks and displaying them using visual components and logic blocks.

1. Create a variable 'count', initialize to 0.
2. Add Buttons '+', '-', 'Reset'.
3. Configure '+': Set variable 'count' = count + 1.
4. Configure '-': Set variable 'count' = count - 1.
5. Configure 'Reset': Set variable 'count' = 0.
6. Bind a Label to 'count' to display the value.

A simple counter app using visual logic blocks to increase, decrease, and reset a counter.

1. Add Text Inputs: 'Username' and 'Password'.
2. Add Button 'Login'.
3. Configure logic blocks:
    - If both fields are non-empty -> Navigate to 'Home' screen.
    - Else -> Show Alert 'Invalid credentials'.

Shows a login form with validation using logic blocks and conditional navigation.

1. Create a variable 'notes' (list).
2. Add a Text Input or Text Area for note entry.
3. Add Button 'Save Note' -> logic: Append input to 'notes'.
4. Bind a List Viewer to 'notes'.
5. Add optional logic to save locally or reset input after adding.

Stores and displays notes using list variables and visual logic blocks.

1. Create variable 'seconds', initialize to 0.
2. Add Label bound to 'seconds'.
3. Add Buttons: 'Start', 'Stop', 'Reset'.
4. 'Start' -> Timer block every 1 sec -> increment 'seconds'.
5. 'Stop' -> Stop Timer. 'Reset' -> Set 'seconds' = 0.

Implements a stopwatch using timer blocks and variable updates.

1. Create variable 'isDark' (boolean).
2. Add a Switch bound to 'isDark'.
3. Configure logic blocks to change background/text colors based on 'isDark'.
4. Add Label to show 'Light Mode' or 'Dark Mode'.
5. Preview switching behavior.

Switches between light and dark themes using a switch and conditional logic blocks.

1. Create variables: 'num1', 'num2', 'result'.
2. Add two Text Inputs for numbers.
3. Add Buttons '+', '-', '*', '/'.
4. On button press -> Set 'result' = formula(num1 op num2).
5. Bind Label to 'result' to display the calculation.

A simple four-function calculator using number inputs and formula blocks.

1. Add Text Input for city name.
2. Create Data Source: REST API (weather API).
3. Bind API response to variable 'weatherData'.
4. Add Button 'Fetch' -> connect to API call.
5. Bind Labels or List Viewer to display temperature, conditions.

Fetches weather data from an API and displays it using labels and list viewers.

1. Create variable 'images' (list of URLs).
2. Add List Viewer bound to 'images'.
3. Add Image component inside List Viewer -> bind to current item's URL.
4. Add Button 'Add Image' -> logic: append new URL to 'images'.
5. Preview on device to verify image layout.

Displays a list of images using a list variable and image components.

1. Add Button 'Scan QR'.
2. Add 'Scan QR/Barcode' logic block connected to button.
3. Create variable 'qrResult'.
4. Store output from scanner to 'qrResult'.
5. Bind Label to 'qrResult' to display scanned data.

Scans QR codes using device capabilities and displays results.