1┌─────────────────────────────────────────┐
2│  [Design] [Workflow] [Data] [Styles]    │
3├─────────────────────────────────────────┤
4│ Elements │                              │
5│ ────────│                              │
6│ Visual  │      CANVAS                   │
7│ Input   │      (Your app)               │
8│ Container│                              │
9│ ...     │                              │
10├─────────────────────────────────────────┤
11│ Properties Panel (right side)           │
12└─────────────────────────────────────────┘

1Text - Display text
2Image - Show images
3Shape - Rectangles, circles
4Icon - Icon library
5Video - Embed videos
6Map - Google Maps

1Input - Text input field
2Multiline Input - Textarea
3Dropdown - Select options
4Checkbox - Yes/no
5Date/Time Picker - Date selection
6File Uploader - Upload files

1Group - Group elements together
2Repeating Group - Lists, grids
3Popup - Modal dialogs
4Floating Group - Fixed position

11. Drag "Text" to canvas
22. Double-click to edit
33. Set font, size, color in Properties
4 
54. Drag "Input" below text
65. Set placeholder text
76. Set input type (text, email, password)
8 
97. Drag "Button"
108. Set button text
119. Set style (colors, rounded)

1Bubble uses "Flexbox" responsive:
2 
3Container settings:
4- Row vs Column layout
5- Gap between elements
6- Alignment (left, center, right)
7- Min/Max width
8 
9Element settings:
10- Fixed vs Fit width
11- Min/Max constraints

1Workflow = When [Event] → Do [Actions]
2 
3Example:
4When: Button is clicked
5Do: 
6  1. Create new thing in database
7  2. Show success message
8  3. Reset inputs

11. Click on Button
22. Click "Start/Edit Workflow"
33. Define trigger (Button clicked)
44. Add Action 1 (e.g., Create thing)
55. Add Action 2 (e.g., Show message)

1Data:
2- Create a new thing
3- Make changes to thing
4- Delete a thing
5 
6Navigation:
7- Go to page
8- Show popup
9- Hide popup
10 
11Element:
12- Set state
13- Display data
14- Reset inputs
15 
16Account:
17- Sign user up
18- Log user in
19- Log user out

1Create "Data Types" = Tables
2 
3Example - Blog App:
4- User (built-in)
5- Post
6- Comment
7- Category

1Post Data Type:
2- title (text)
3- content (text)
4- author (User)
5- created_date (date)
6- image (image)
7- category (Category)
8- is_published (yes/no)

1One-to-Many:
2User → Posts (một user có nhiều posts)
3 
4Many-to-Many:
5Post ↔ Categories (list of Categories)

1Text element showing username:
2 
3Content: "Hello, Current User's name"
4 
5Syntax: Current User's name
6(Select from dropdown, not typed)

1Display list of Posts:
2 
31. Add Repeating Group
42. Type of content: Post
53. Data source: Search for Posts
64. Inside RG: Add elements
75. Use "Current cell's Post's title"

1Data source options:
2 
3Search for Posts:
4- Created by = Current User
5- Is_published = yes
6- Created date > 7 days ago
7- :sorted by Created date (descending)

1Store temporary data:
2 
31. Select element (or page)
42. Add custom state
53. Name: "selected_tab"
64. Type: text
75. Default: "home"
8 
9Use in conditionals:
10When Page's selected_tab is "home" → Show home content

1Built-in states:
2- Input's value
3- Dropdown's value
4- Checkbox is checked
5- Group is visible

1Data Type: Task
2Fields:
3- title (text)
4- is_done (yes/no)
5- user (User)
6 
7Page Elements:
8- Input (task title)
9- Button (Add)
10- Repeating Group (tasks)
11  - Text (title)
12  - Checkbox (done)
13  - Icon (delete)
14 
15Workflows:
16- Button click → Create Task
17- Checkbox change → Update Task
18- Delete click → Delete Task