Getting Started with Codular

Codular is an AI-first no-code platform for building mobile apps. Design screens visually, add logic with flows, and export to React Native - no coding required.

Screens

Each screen is a page in your app. Add components like Text, Buttons, Images, and Lists to design your UI.

Components

Drag-and-drop UI building blocks. Each has properties (appearance), events (interactions), and styles (layout).

Flows

Visual logic builder. Connect nodes to define what happens when users tap buttons, submit forms, or load screens.

Variables

Store data like user input, API responses, or app state. Variables can be used across screens and flows.

Quick Start

Create a new project from the dashboard

Design your first screen by dragging components from the left palette

Configure component properties in the right panel

Switch to Flows tab to add logic (button actions, API calls, navigation)

Preview your app in the browser or on your phone via Companion

Build an APK/AAB when you're ready to publish

Variables

Variables store data that your app uses - user input, API responses, counters, lists, and more.

Variable Types

Type	Default	Use Case
string	""	Text input, names, messages
number	0	Counters, prices, scores
boolean	false	Toggles, on/off states, dark mode
array	[]	Todo lists, chat messages, search results
object	{}	User profiles, API responses, form data

Using Variables

Bind to Components

Connect a variable to a TextInput, Switch, or List to display/edit its value automatically.

Set in Flows

Use the Set Variable node to update values when buttons are pressed or events fire.

Use in Text

Reference variables in text using ${variableName} syntax - e.g., "Hello, ${userName}!"

Persist with Storage

Save to Storage / Load from Storage nodes let you keep variable data between app sessions.

Components Reference

169 components across 12 categories

Layout12

ContainerContainer

A flexible box that holds other components inside it

Properties

Name	Type	Default
scrollable	boolean	false

Events

onPress

Category: layoutSub: GeneralAccepts children

Horizontal ArrangementRow

Arranges child components side by side horizontally

Category: layoutSub: GeneralAccepts children

Vertical ArrangementColumn

Stacks child components vertically from top to bottom

Category: layoutSub: GeneralAccepts children

Card ViewCard

A raised surface with shadow for grouping content

Properties

Name	Type	Default
elevation	number	2
outlined	boolean	false

Events

onPress

Category: layoutSub: GeneralAccepts children

Grid ViewGridView

Arranges children in a grid with multiple columns

Properties

Name	Type	Default
columns	number	2

Category: layoutSub: GeneralAccepts children

SpacerSpace

Adds empty space between components

Properties

Name	Type	Default
size	number	16

Category: layoutSub: GeneralNo children

Vertical ScrollScrollView

Makes content scrollable when it overflows vertically

Events

onScroll

Category: layoutSub: ScrollingAccepts children

Horizontal ScrollHorizontalScroll

Makes content scrollable horizontally

Events

onScroll

Category: layoutSub: ScrollingAccepts children

Swipe RefreshSwipeRefresh

Pull down to refresh content inside

Events

onRefresh

Category: layoutSub: ScrollingAccepts children

ModalModal

A popup dialog that appears over the current screen

Properties

Name	Type	Default
visible	boolean	false
title	string	Modal Title
animationType	select	fade
dismissable	boolean	true

Events

onClose

Category: layoutSub: ViewsAccepts children

Bottom SheetBottomSheet

A panel that slides up from the bottom

Properties

Name	Type	Default
visible	boolean	false

Events

onClose

Category: layoutSub: ViewsAccepts children

Web ViewerWebView

Displays a website inside your app

Properties

Name	Type	Default
url	string
scrollbar	boolean	true
visible	boolean	true
zoomEnabled	boolean	true
zoomDisplay	boolean	true
zoomPercent	number	100
desktopMode	boolean	false
followLinks	boolean	true
loadImages	boolean	true
ignoreSslErrors	boolean	false
useExternalBrowser	boolean	false
userAgent	string
usesLocation	boolean	false
promptForPermission	boolean	true

Events

onLoadonErroronPageStartedonPageFinished

Category: layoutSub: ViewsNo children

Navigation4

Bottom NavigationBottomTabs

Navigation bar at the bottom with tab icons. Multiple styles available.

Properties

Name	Type	Default
tabs	string	[]
variant	select	default
activeColor	color	#6d28d9
inactiveColor	color	#94a3b8
backgroundColor	color	#ffffff
showLabels	boolean	true
activeTab	number	0

Events

onTabChange

Category: navigationSub: NavigationNo children

Tab LayoutTabLayout

Swipeable tabs to switch between views

Properties

Name	Type	Default
tabs	string	Tab 1,Tab 2

Events

onTabChange

Category: navigationSub: NavigationAccepts children

Side MenuDrawer

Slide-out menu from the side of the screen

Events

onOpenonClose

Category: navigationSub: NavigationAccepts children

View PagerViewPager

Swipe left/right to navigate between pages

Events

onPageChange

Category: navigationSub: NavigationAccepts children

Display35

TextText

Displays text like headings, paragraphs, or labels

Properties

Name	Type	Default
text	string	Hello World
variant	select	body
maxLines	number	0
selectable	boolean	false

Events

onPress

Category: displayNo children

ImageImage

Shows an image from a URL or uploaded file

Properties

Name	Type	Default
source	image
resizeMode	select	cover
borderRadius	number	0
alt	string

Events

onPressonLoadonError

Category: displayNo children

IconIcon

Displays a small icon symbol

Properties

Name	Type	Default
name	icon	star
size	number	24
color	color	#000000

Events

onPress

Category: displayNo children

DividerDivider

A thin horizontal line to separate content

Category: displayNo children

BadgeBadge

A small label for status or notifications

Properties

Name	Type	Default
text	string	New
variant	select	primary

Category: displayNo children

Progress BarProgressBar

Shows progress as a horizontal bar

Properties

Name	Type	Default
progress	number	50
color	color	#3b82f6

Category: displayNo children

AvatarAvatar

A circular image for user profile pictures

Properties

Name	Type	Default
source	image
name	string
size	number	48

Events

onPress

Category: displayNo children

MapMap

Google Maps view with markers and user location

Properties

Name	Type	Default
latitude	number	37.7749
longitude	number	-122.4194
zoom	number	12
showUserLocation	boolean	false
mapType	select	standard
markers	string	[]

Events

onMarkerPressonMapPressonRegionChange

Category: displaySub: MediaNo children

Video PlayerVideo

Play video from a URL with playback controls

Properties

Name	Type	Default
url	string
autoPlay	boolean	false
loop	boolean	false
muted	boolean	false
controls	boolean	true

Events

onPlayonPauseonEndonError

Category: displaySub: MediaNo children

Audio PlayerAudioPlayer

Play audio from a URL with playback controls

Properties

Name	Type	Default
url	string
autoPlay	boolean	false
loop	boolean	false

Events

onPlayonPauseonEnd

Category: displaySub: MediaNo children

Lottie AnimationLottieAnimation

Play Lottie animations from a JSON file URL or asset

Properties

Name	Type	Default
source	image
autoPlay	boolean	true
loop	boolean	true
speed	number	1

Events

onAnimationFinishonAnimationLooponPress

Category: displaySub: MediaNo children

PDF ViewerPDFViewer

Display PDF documents from URL or local file

Properties

Name	Type	Default
source	string
showToolbar	boolean	true

Events

onLoadonErroronPageChange

Category: displaySub: MediaNo children

Barcode / QR GeneratorBarcodeGenerator

Generate QR codes and barcodes from text

Properties

Name	Type	Default
value	string
format	select	QR_CODE
size	number	200
color	color	#000000

Category: displaySub: MediaNo children

Timer / CountdownTimer

Countdown timer with start, pause, reset controls

Properties

Name	Type	Default
duration	number	60
autoStart	boolean	false
showMinutes	boolean	true

Events

onTickonFinish

Category: displayNo children

StopwatchStopwatch

Count up timer with lap support

Properties

Name	Type	Default
showMilliseconds	boolean	true

Events

onTickonLap

Category: displayNo children

ChartChart

Display bar, line, pie, or donut charts with data from variables

Properties

Name	Type	Default
chartType	select	bar
dataVariable	string
labels	string	Mon,Tue,Wed,Thu,Fri
colors	string	#3b82f6,#8b5cf6,#22c55e,#f59e0b,#ef4444
showLegend	boolean	true
showGrid	boolean	true
title	string

Events

onDataPointPress

Category: displaySub: ChartsNo children

Drawing CanvasDrawingCanvas

Freehand drawing surface — sketch, annotate, doodle

Properties

Name	Type	Default
strokeColor	color	#000000
strokeWidth	number	3
backgroundColor	color	#ffffff
tool	select	pen

Events

onDrawStartonDrawEndonClear

Category: displaySub: CreativeNo children

Carousel / Image SliderCarousel

Swipeable image slider with dots indicator and auto-play

Properties

Name	Type	Default
images	string
autoPlay	boolean	true
interval	number	3000
showDots	boolean	true
borderRadius	number	12

Events

onSlideChangeonPress

Category: displaySub: MediaNo children

Image GalleryImageGallery

A grid of tappable images with lightbox preview

Properties

Name	Type	Default
variableId	string
columns	number	3
gap	number	4
aspectRatio	select	square

Events

onImagePress

Category: displayNo children

Circular ProgressCircularProgress

A ring-shaped progress indicator

Properties

Name	Type	Default
value	number	75
variableId	string
size	number	120
strokeWidth	number	10
color	color	#3b82f6
trackColor	color	#e2e8f0
showValue	boolean	true
label	string

Category: displayNo children

Skeleton LoaderSkeletonLoader

Animated loading placeholder

Properties

Name	Type	Default
variant	select	text
lines	number	3
width	number	0
height	number	0

Category: displayNo children

Countdown TimerCountdownTimer

A visual countdown display

Properties

Name	Type	Default
targetDate	string
variableId	string
showDays	boolean	true
showHours	boolean	true
showMinutes	boolean	true
showSeconds	boolean	true

Events

onComplete

Category: displayNo children

Product CardProductCard

Display a product with image, title, price, and rating

Properties

Name	Type	Default
title	string	Product Name
price	string	$99.00
originalPrice	string
image	image
rating	number	4.5
badge	string

Events

onPressonAddToCart

Category: displaySub: E-CommerceNo children

Cart BadgeCartBadge

Shopping cart icon with item count

Properties

Name	Type	Default
count	number	0
variableId	string
iconColor	color	#0f172a
badgeColor	color	#ef4444

Events

onPress

Category: displaySub: E-CommerceNo children

Price TagPriceTag

Formatted price display with optional discount

Properties

Name	Type	Default
price	string	$99.00
originalPrice	string
currency	string	$
showDiscount	boolean	true

Category: displaySub: E-CommerceNo children

Order TrackerOrderTracker

Step progress for order status tracking

Properties

Name	Type	Default
steps	string	Ordered,Shipped,Out for Delivery,Delivered
currentStep	number	1
variableId	string
color	color	#22c55e

Category: displaySub: E-CommerceNo children

Chat BubbleChatBubble

Message bubble with sent/received styling

Properties

Name	Type	Default
message	string	Hello!
isSent	boolean	false
timestamp	string
senderName	string
avatar	image
sentColor	color	#3b82f6
receivedColor	color	#f1f5f9

Events

onPressonLongPress

Category: displaySub: ChatNo children

Post CardPostCard

Social media post with image, text, like/comment/share

Properties

Name	Type	Default
author	string	User Name
authorAvatar	image
content	string	This is a sample post!
image	image
likes	number	42
comments	number	5
timeAgo	string	2h ago

Events

onLikeonCommentonShareonPress

Category: displaySub: SocialNo children

Story CircleStoryCircle

Instagram-style circular story avatar

Properties

Name	Type	Default
image	image
label	string	User
hasStory	boolean	true
size	number	72
borderColor	color	#ec4899

Events

onPress

Category: displaySub: SocialNo children

Quiz CardQuizCard

Question card with multiple choice options

Properties

Name	Type	Default
question	string	What is 2 + 2?
options	string	3,4,5,6
correctAnswer	string	4
variableId	string

Events

onAnswer

Category: displaySub: EducationNo children

FlashcardFlashcard

A flip card with front and back for learning

Properties

Name	Type	Default
front	string	Question
back	string	Answer
frontColor	color	#3b82f6
backColor	color	#22c55e

Events

onFlip

Category: displaySub: EducationNo children

Music PlayerMusicPlayer

Full audio player with progress, controls, and artwork

Properties

Name	Type	Default
title	string	Song Title
artist	string	Artist Name
artwork	image
audioUrl	string

Events

onPlayonPauseonNextonPrevious

Category: displaySub: MediaNo children

Map MarkerMapMarker

A customizable pin for use on maps

Properties

Name	Type	Default
latitude	number	0
longitude	number	0
title	string	Location
color	color	#ef4444

Events

onPress

Category: displaySub: MapsNo children

Place CardPlaceCard

Location card with address, rating, and distance

Properties

Name	Type	Default
name	string	Place Name
address	string	123 Main St
rating	number	4.2
distance	string	1.2 km
image	image
category	string	Restaurant

Events

onPressonDirections

Category: displaySub: MapsNo children

Game Grid (2048)GameGrid

A 2048-style sliding puzzle game with swipe controls and scoring

Properties

Name	Type	Default
gridSize	select	4
scoreVariableId	string
bestScoreVariableId	string
gameStateVariableId	string
targetTile	number	2048
bgColor	color	#bbada0
emptyTileColor	color	#cdc1b4
tile2Color	color	#eee4da
tile4Color	color	#ede0c8
tile8Color	color	#f2b179
tile16Color	color	#f59563
tile32Color	color	#f67c5f
tile64Color	color	#f65e3b
tile128Color	color	#edcf72
tile256Color	color	#edcc61
tile512Color	color	#edc850
tile1024Color	color	#edc53f
tile2048Color	color	#edc22e
tileLowTextColor	color	#776e65
tileHighTextColor	color	#f9f6f2
tileRadius	number	6

Events

onScoreonGameOveronWinonMoveonReset

Category: displaySub: GamesNo children

Input30

ButtonButton

A clickable button that triggers an action

Properties

Name	Type	Default
title	string	Button
variant	select	primary
disabled	boolean	false
fullWidth	boolean	true
icon	icon

Events

onPressonLongPress

Category: inputNo children

Text InputTextInput

A single-line text field for user input

Properties

Name	Type	Default
placeholder	string	Enter text...
label	string
secureTextEntry	boolean	false
keyboardType	select	default
variableId	string
maxLength	number	0
autoFocus	boolean	false
multiline	boolean	false

Events

onChangeonSubmitonFocusonBlur

Category: inputNo children

Text AreaTextArea

A multi-line text field for longer input

Properties

Name	Type	Default
placeholder	string	Enter text...
numberOfLines	number	4
variableId	string

Events

onChangeonFocusonBlur

Category: inputNo children

SwitchSwitch

A toggle switch for on/off settings

Properties

Name	Type	Default
label	string	Toggle
variableId	string
trackColor	color	#3b82f6

Events

onChange

Category: inputNo children

CheckboxCheckbox

A checkable box for yes/no choices

Properties

Name	Type	Default
label	string	Check me
variableId	string
color	color	#3b82f6

Events

onChange

Category: inputNo children

DropdownDropdown

A dropdown menu to pick from a list of options

Properties

Name	Type	Default
label	string	Select
placeholder	string	Choose an option
variableId	string

Events

onChange

Category: inputNo children

Date PickerDatePicker

Opens a calendar to pick a date

Properties

Name	Type	Default
label	string	Select date
variableId	string

Events

onChange

Category: inputNo children

Radio ButtonRadioButton

Select one option from a group

Properties

Name	Type	Default
label	string	Option
variableId	string

Events

onChange

Category: inputNo children

SliderSlider

Drag a handle to select a value in a range

Properties

Name	Type	Default
min	number	0
max	number	100
step	number	1
variableId	string

Events

onChange

Category: inputNo children

Floating Action ButtonFloatingButton

A round button that floats above content

Properties

Name	Type	Default
icon	icon	plus
size	select	normal

Events

onPress

Category: inputNo children

CameraCamera

Take a photo or record video using the device camera

Properties

Name	Type	Default
quality	select	medium
cameraType	select	back
flashMode	select	off

Events

onCaptureonError

Category: inputSub: Media & SensorsNo children

Image PickerImagePicker

Pick an image or video from the device gallery

Properties

Name	Type	Default
allowMultiple	boolean	false
maxFiles	number	1
mediaType	select	images

Events

onPickonError

Category: inputSub: Media & SensorsNo children

Audio RecorderAudioRecorder

Record audio from the device microphone

Properties

Name	Type	Default
maxDuration	number	60
format	select	m4a

Events

onStartonStoponError

Category: inputSub: Media & SensorsNo children

Contact PickerContactPicker

Pick a contact from the device address book

Events

onPickonError

Category: inputSub: Media & SensorsNo children

QR/Barcode ScannerQRScanner

Scan QR codes and barcodes using the device camera

Properties

Name	Type	Default
cameraType	select	back

Events

onScanonError

Category: inputSub: Media & SensorsNo children

Signature PadSignaturePad

Capture signatures — for forms, contracts, deliveries

Properties

Name	Type	Default
penColor	color	#1e293b
penWidth	number	2
placeholder	string	Sign here
backgroundColor	color	#f8fafc
variableId	string

Events

onSignatureStartonSignatureEndonClear

Category: inputNo children

Color PickerColorPicker

Let users pick a color — for themes, customization, design tools

Properties

Name	Type	Default
defaultColor	color	#3b82f6
showHex	boolean	true
palette	string	#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6,#ec4899,#000000,#ffffff
variableId	string

Events

onColorChange

Category: inputNo children

Time PickerTimePicker

Pick a time (hours and minutes) — for alarms, scheduling, reminders

Properties

Name	Type	Default
format	select	12h
defaultTime	string	09:00
variableId	string

Events

onTimeChange

Category: inputNo children

Rating BarRatingBar

Star rating component — 1 to 5 stars for reviews and feedback

Properties

Name	Type	Default
maxStars	number	5
defaultRating	number	0
size	number	28
activeColor	color	#f59e0b
inactiveColor	color	#e2e8f0
readOnly	boolean	false
variableId	string

Events

onRatingChange

Category: inputNo children

Stepper / Number PickerStepper

Increment/decrement number with + and - buttons

Properties

Name	Type	Default
min	number	0
max	number	100
step	number	1
defaultValue	number	0
variableId	string

Events

onChange

Category: inputNo children

Chip / Tag GroupChipGroup

Selectable chips/tags — for filters, categories, multi-select

Properties

Name	Type	Default
chips	string	Option 1,Option 2,Option 3
multiSelect	boolean	false
activeColor	color	#3b82f6
variableId	string

Events

onChipSelectonChipDeselect

Category: inputNo children

Search BarSearchBar

Search input with icon, clear button, and voice search option

Properties

Name	Type	Default
placeholder	string	Search...
showVoice	boolean	false
showClear	boolean	true
variableId	string

Events

onSearchonChangeonClearonVoice

Category: inputNo children

OTP InputOTPInput

A verification code input with separate digit boxes

Properties

Name	Type	Default
length	number	6
variableId	string
secureTextEntry	boolean	false

Events

onChangeonComplete

Category: inputNo children

CalendarCalendar

A monthly calendar view for selecting dates

Properties

Name	Type	Default
variableId	string
minDate	string
maxDate	string
highlightToday	boolean	true

Events

onDateSelect

Category: inputNo children

Rich Text EditorRichTextEditor

A text editor with bold, italic, and list formatting

Properties

Name	Type	Default
variableId	string
placeholder	string	Start typing...
minHeight	number	200

Events

onChange

Category: inputNo children

Quantity StepperQuantityStepper

+/- quantity selector for cart items

Properties

Name	Type	Default
variableId	string
min	number	1
max	number	99

Events

onChange

Category: inputSub: E-CommerceNo children

Coupon InputCouponInput

Promo code input with apply button

Properties

Name	Type	Default
variableId	string
placeholder	string	Enter coupon code
buttonText	string	Apply

Events

onApply

Category: inputSub: E-CommerceNo children

Chat InputChatInput

Text input with send button and attachment

Properties

Name	Type	Default
variableId	string
placeholder	string	Type a message...
showAttachment	boolean	true

Events

onSendonAttachment

Category: inputSub: ChatNo children

Like ButtonLikeButton

Animated like/heart button with count

Properties

Name	Type	Default
count	number	0
variableId	string
liked	boolean	false
likedVariableId	string
color	color	#ef4444

Events

onPress

Category: inputSub: SocialNo children

Swipe ButtonSwipeButton

Swipe-to-confirm button with animated slider thumb, icon, and label

Properties

Name	Type	Default
title	string	Swipe to confirm
thumbIcon	icon	ChevronRight
trailIcon	icon
thumbColor	color	#c8ff00
trackColor	color	#2a2a1e
textColor	color	#ffffff
thumbSize	number	52
resetAfterSlide	boolean	true
disabled	boolean	false

Events

onSlideComplete

Category: inputNo children

Data4

ListList

Displays a scrollable list of items from data

Properties

Name	Type	Default
dataSourceId	string
variableId	string
emptyText	string	No items
showDivider	boolean	true
itemHeight	number	56

Events

onItemPressonRefresh

Category: dataNo children

Data TableDataTable

Displays data in rows and columns like a spreadsheet

Properties

Name	Type	Default
variableId	string
columns	string

Events

onRowPress

Category: dataNo children

Message ListMessageList

Scrollable chat messages container (auto-scrolls to bottom)

Properties

Name	Type	Default
variableId	string
emptyText	string	No messages yet

Events

onItemPress

Category: dataSub: ChatNo children

Kanban BoardKanbanBoard

Drag-and-drop columns (Todo/Doing/Done)

Properties

Name	Type	Default
columns	string	Todo,In Progress,Done
variableId	string

Events

onTaskMoveonTaskPress

Category: dataSub: ProductivityNo children

Storage3

Local StorageLocalStorage

Save and load data on the device. Data persists between app sessions.

Properties

Name	Type	Default
namespace	string	app_data

Category: storageNo children

Cloud DatabaseCloudDB

Store data in the cloud. Sync across devices. Requires Supabase setup.

Properties

Name	Type	Default
provider	select	supabase
apiUrl	string
apiKey	string

Category: storageNo children

File StorageFileStorage

Upload and download files. Store images, documents, and media.

Properties

Name	Type	Default
provider	select	local

Category: storageNo children

Feedback7

SnackbarSnackbar

A brief message bar at the bottom of the screen with an optional action

Properties

Name	Type	Default
message	string	Action completed
actionLabel	string
visible	boolean	false

Events

onActiononDismiss

Category: feedbackNo children

Local NotificationLocalNotification

Schedule local notifications on the device — no server needed

Properties

Name	Type	Default
title	string	Reminder
body	string
channelId	string	default

Events

onNotificationPressed

Category: feedbackNo children

Alert DialogAlertDialog

Alert dialog with icon, title, message, and confirm/cancel buttons

Properties

Name	Type	Default
visible	boolean	false
icon	icon	AlertCircle
iconColor	color	#ef4444
title	string	Are you sure?
message	string	This action cannot be undone.
confirmText	string	Confirm
cancelText	string	Cancel
confirmColor	color	#ef4444
variant	select	default

Events

onConfirmonCancelonDismiss

Category: feedbackNo children

Confirm DialogConfirmDialog

Success/info dialog with image or icon, title, message, and action buttons

Properties

Name	Type	Default
visible	boolean	false
image	image
icon	icon	CheckCircle
iconColor	color	#22c55e
title	string	Success!
message	string	Your action was completed.
primaryText	string	Continue
secondaryText	string
primaryColor	color	#3b82f6

Events

onPrimaryonSecondaryonDismiss

Category: feedbackNo children

Input DialogInputDialog

Dialog with text input — for prompts, rename, etc.

Properties

Name	Type	Default
visible	boolean	false
title	string	Enter Value
message	string
placeholder	string	Type here...
inputType	select	text
confirmText	string	Submit
cancelText	string	Cancel
confirmColor	color	#3b82f6
variableId	string

Events

onSubmitonCancel

Category: feedbackNo children

Action SheetActionSheet

Bottom slide-up sheet with action options — like iOS action sheet

Properties

Name	Type	Default
visible	boolean	false
title	string	Choose an option
options	string	Edit,Share,Delete
destructiveIndex	number	-1
cancelText	string	Cancel

Events

onSelectonCancel

Category: feedbackNo children

Loading DialogLoadingDialog

Loading overlay with spinner and optional message

Properties

Name	Type	Default
visible	boolean	false
message	string	Please wait...
variant	select	overlay
spinnerColor	color	#3b82f6

Category: feedbackNo children

Monetization32

AdMob BannerAdMobBanner

Displays a Google AdMob banner ad

Properties

Name	Type	Default
adUnitId	string
size	select	BANNER
testMode	boolean	true
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClicked

Category: monetizationSub: Google AdMobNo children

AdMob InterstitialAdMobInterstitial

Full-screen Google AdMob interstitial ad (shown via flow)

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonAdShowed

Category: monetizationSub: Google AdMobNo children

AdMob RewardedAdMobRewarded

Google AdMob rewarded video ad — user watches ad to earn reward

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Google AdMobNo children

AdMob Native AdAdMobNative

Google AdMob native ad that blends with your app content

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
mediaAspectRatio	select	ANY
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClickedonAdImpression

Category: monetizationSub: Google AdMobNo children

AdMob App OpenAdMobAppOpen

Google AdMob app open ad shown when app comes to foreground

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoShow	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonAdShowed

Category: monetizationSub: Google AdMobNo children

AdMob Rewarded InterstitialAdMobRewardedInterstitial

Google AdMob rewarded interstitial — full-screen ad with optional reward

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Google AdMobNo children

Ad Manager BannerAdManagerBanner

Google Ad Manager banner ad

Properties

Name	Type	Default
adUnitId	string
size	select	BANNER
testMode	boolean	true
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClickedonAppEvent

Category: monetizationSub: Google Ad ManagerNo children

Ad Manager InterstitialAdManagerInterstitial

Google Ad Manager full-screen interstitial ad

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonAdShowedonAppEvent

Category: monetizationSub: Google Ad ManagerNo children

Ad Manager RewardedAdManagerRewarded

Google Ad Manager rewarded video ad

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Google Ad ManagerNo children

Ad Manager Native AdAdManagerNative

Google Ad Manager native ad layout that blends with app content

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
mediaAspectRatio	select	ANY
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClickedonAdImpressiononAppEvent

Category: monetizationSub: Google Ad ManagerNo children

Ad Manager App OpenAdManagerAppOpen

Google Ad Manager app open ad shown when app comes to foreground

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoShow	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonAdShowed

Category: monetizationSub: Google Ad ManagerNo children

Ad Manager Rewarded InterstitialAdManagerRewardedInterstitial

Google Ad Manager rewarded interstitial ad

Properties

Name	Type	Default
adUnitId	string
testMode	boolean	true
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Google Ad ManagerNo children

Facebook BannerFacebookBanner

Displays a Meta Audience Network banner ad

Properties

Name	Type	Default
placementId	string
size	select	STANDARD
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClicked

Category: monetizationSub: Meta AdsNo children

Facebook InterstitialFacebookInterstitial

Full-screen Meta Audience Network interstitial ad

Properties

Name	Type	Default
placementId	string
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosed

Category: monetizationSub: Meta AdsNo children

Facebook RewardedFacebookRewarded

Meta Audience Network rewarded video ad

Properties

Name	Type	Default
placementId	string
autoLoad	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Meta AdsNo children

Unity BannerUnityBanner

Displays a Unity Ads banner

Properties

Name	Type	Default
gameId	string
placementId	string	banner
testMode	boolean	true
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClicked

Category: monetizationSub: Unity AdsNo children

Unity InterstitialUnityInterstitial

Full-screen Unity Ads interstitial

Properties

Name	Type	Default
gameId	string
placementId	string	interstitial
testMode	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonAdShowed

Category: monetizationSub: Unity AdsNo children

Unity RewardedUnityRewarded

Unity Ads rewarded video — user watches ad for reward

Properties

Name	Type	Default
gameId	string
placementId	string	rewarded
testMode	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Unity AdsNo children

AppLovin BannerAppLovinBanner

AppLovin MAX banner ad

Properties

Name	Type	Default
adUnitId	string
size	select	BANNER
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClicked

Category: monetizationSub: AppLovinNo children

AppLovin InterstitialAppLovinInterstitial

AppLovin MAX full-screen interstitial ad

Properties

Name	Type	Default
adUnitId	string

Events

onAdLoadedonAdFailedToLoadonAdClosedonAdShowed

Category: monetizationSub: AppLovinNo children

AppLovin RewardedAppLovinRewarded

AppLovin MAX rewarded video ad

Properties

Name	Type	Default
adUnitId	string

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: AppLovinNo children

Start.io BannerStartIoBanner

Start.io banner ad

Properties

Name	Type	Default
appId	string
size	select	BANNER
visible	boolean	true

Events

onAdLoadedonAdFailedToLoadonAdClicked

Category: monetizationSub: Start.ioNo children

Start.io InterstitialStartIoInterstitial

Start.io full-screen interstitial ad

Properties

Name	Type	Default
appId	string

Events

onAdLoadedonAdFailedToLoadonAdClosed

Category: monetizationSub: Start.ioNo children

Start.io RewardedStartIoRewarded

Start.io rewarded video ad

Properties

Name	Type	Default
appId	string

Events

onAdLoadedonAdFailedToLoadonAdClosedonRewarded

Category: monetizationSub: Start.ioNo children

Razorpay Pay ButtonRazorpayButton

Accept payments via Razorpay. Supports UPI, cards, netbanking, wallets.

Properties

Name	Type	Default
apiKey	string
amount	number	10000
currency	select	INR
name	string	My Store
description	string	Purchase
buttonText	string	Pay Now
color	color	#528FF0
prefillEmail	string
prefillPhone	string

Events

onPaymentSuccessonPaymentErroronPaymentDismissed

Category: monetizationSub: PaymentsNo children

Stripe Pay ButtonStripeButton

Accept payments via Stripe. Supports cards, Apple Pay, Google Pay.

Properties

Name	Type	Default
publishableKey	string
amount	number	1000
currency	select	usd
buttonText	string	Pay with Card
description	string	Purchase

Events

onPaymentSuccessonPaymentErroronPaymentDismissed

Category: monetizationSub: PaymentsNo children

PayPal Pay ButtonPayPalButton

Accept payments via PayPal. One-time and subscription payments.

Properties

Name	Type	Default
clientId	string
amount	number	10
currency	select	USD
buttonText	string	Pay with PayPal

Events

onPaymentSuccessonPaymentErroronPaymentCancelled

Category: monetizationSub: PaymentsNo children

In-App PurchaseInAppPurchase

Sell digital products or subscriptions within your app (Google Play / App Store).

Properties

Name	Type	Default
productId	string
productType	select	one_time
buttonText	string	Purchase

Events

onPurchaseSuccessonPurchaseErroronPurchaseRestored

Category: monetizationSub: PaymentsNo children

Play Store ReviewPlayStoreReview

Prompt users to rate and review your app on Google Play Store

Properties

Name	Type	Default
minLaunches	number	5
minDays	number	3

Events

onReviewSubmittedonReviewDismissed

Category: monetizationSub: Play StoreNo children

Play Store UpdatePlayStoreUpdate

Check for app updates and prompt users to update from Google Play Store

Properties

Name	Type	Default
updateMode	select	flexible
checkOnLoad	boolean	true

Events

onUpdateAvailableonUpdateDownloadedonNoUpdate

Category: monetizationSub: Play StoreNo children

Google Play BillingGooglePlayBilling

Accept payments through Google Play Store — one-time purchases, subscriptions, and consumables

Properties

Name	Type	Default
productIds	string
purchaseType	select	inapp
buttonText	string	Buy Now
autoFetchPrices	boolean	true

Events

onPurchaseSuccessonPurchaseErroronPurchasePendingonPricesLoaded

Category: monetizationSub: Play StoreNo children

Play Store SubscriptionPlayStoreSubscription

Manage recurring subscriptions via Google Play — monthly, yearly, free trial

Properties

Name	Type	Default
subscriptionId	string
planId	string
offerId	string
buttonText	string	Subscribe
showPrice	boolean	true

Events

onSubscribedonSubscriptionErroronSubscriptionCancelledonSubscriptionExpired

Category: monetizationSub: Play StoreNo children

Authentication9

Google Sign-InGoogleSignIn

Lets users sign in with their Google account

Properties

Name	Type	Default
clientId	string
scopes	string	email,profile
autoSignIn	boolean	false

Events

onSignInonSignOutonError

Category: authenticationSub: GoogleNo children

Facebook LoginFacebookLogin

Lets users sign in with their Facebook account

Properties

Name	Type	Default
appId	string
permissions	string	public_profile,email

Events

onLoginonLogoutonError

Category: authenticationSub: FacebookNo children

Firebase Email AuthFirebaseAuth

Firebase email/password authentication

Properties

Name	Type	Default
projectId	string
apiKey	string
allowSignUp	boolean	true
emailVerification	boolean	false

Events

onSignInonSignUponSignOutonPasswordResetonError

Category: authenticationSub: FirebaseNo children

Firebase Google AuthFirebaseGoogleAuth

Properties

Name	Type	Default
projectId	string
apiKey	string
clientId	string

Events

onSignInonSignOutonError

Category: authenticationSub: FirebaseNo children

Firebase Phone AuthFirebasePhoneAuth

Properties

Name	Type	Default
projectId	string
apiKey	string
timeout	number	60
autoVerify	boolean	true

Events

onCodeSentonSignInonError

Category: authenticationSub: FirebaseNo children

Apple Sign-InAppleSignIn

Lets users sign in with their Apple ID (iOS)

Properties

Name	Type	Default
serviceId	string
requestedScopes	string	fullName,email

Events

onSignInonSignOutonError

Category: authenticationSub: AppleNo children

GitHub LoginGitHubLogin

Lets users sign in with their GitHub account

Properties

Name	Type	Default
clientId	string
scopes	string	user:email

Events

onLoginonLogoutonError

Category: authenticationSub: GitHubNo children

Twitter/X LoginTwitterLogin

Lets users sign in with their Twitter/X account

Properties

Name	Type	Default
apiKey	string
apiSecret	string

Events

onLoginonLogoutonError

Category: authenticationSub: Twitter/XNo children

Biometric AuthBiometricAuth

Authenticate using fingerprint or Face ID

Properties

Name	Type	Default
promptTitle	string	Authenticate
promptSubtitle	string	Use biometrics to continue
cancelText	string	Cancel

Events

onAuthSuccessonAuthErroronAuthNotAvailable

Category: authenticationNo children

Firebase7

Firebase Realtime DBFirebaseDatabase

Read and write data to Firebase Realtime Database

Properties

Name	Type	Default
projectId	string
apiKey	string
databaseUrl	string
path	string	/

Events

onDataReceivedonDataChangedonError

Category: firebaseSub: DatabaseNo children

Firebase FirestoreFirebaseFirestore

Read and write documents in Cloud Firestore

Properties

Name	Type	Default
projectId	string
apiKey	string
collection	string

Events

onDocumentReceivedonQueryResultonError

Category: firebaseSub: DatabaseNo children

Firebase StorageFirebaseStorage

Upload and download files from Firebase Cloud Storage

Properties

Name	Type	Default
projectId	string
apiKey	string
storageBucket	string
maxFileSize	number	10

Events

onUploadCompleteonDownloadCompleteonProgressonError

Category: firebaseSub: StorageNo children

Firebase Push NotificationsFirebaseMessaging

Send and receive push notifications via Firebase Cloud Messaging

Properties

Name	Type	Default
projectId	string
apiKey	string
topic	string
requestPermission	boolean	true

Events

onMessageReceivedonTokenReceivedonError

Category: firebaseSub: MessagingNo children

Firebase AnalyticsFirebaseAnalytics

Track user events and app usage with Firebase Analytics

Properties

Name	Type	Default
projectId	string
apiKey	string
analyticsEnabled	boolean	true
sessionTimeout	number	30

Category: firebaseSub: AnalyticsNo children

Firebase CrashlyticsFirebaseCrashlytics

Automatic crash reporting with Firebase Crashlytics

Properties

Name	Type	Default
projectId	string
apiKey	string
enabled	boolean	true
collectUserId	boolean	false

Category: firebaseSub: AnalyticsNo children

Firebase Remote ConfigFirebaseRemoteConfig

Remotely configure your app without publishing updates

Properties

Name	Type	Default
projectId	string
apiKey	string
fetchInterval	number	3600
defaults	string	{}

Events

onFetchCompleteonError

Category: firebaseSub: ConfigNo children

Social6

Share ButtonShareButton

Native share dialog to share text, links, or images

Properties

Name	Type	Default
title	string	Share
message	string
url	string
variant	select	primary

Events

onShareCompleteonShareDismissedonError

Category: socialNo children

Deep LinkDeepLink

Handle deep links and universal links to open specific screens

Properties

Name	Type	Default
scheme	string	myapp
host	string
pathPrefix	string	/

Events

onLinkReceived

Category: socialNo children

Activity StarterActivityStarter

Launch other apps or Android intents — open settings, maps, other apps

Properties

Name	Type	Default
action	select	android.intent.action.VIEW
customAction	string
dataUri	string
dataType	string
packageName	string
className	string
extraKey	string
extraValue	string

Events

onActivityResultonError

Category: socialNo children

SMS SenderSMSSender

Send SMS messages via device intent

Properties

Name	Type	Default
phoneNumber	string
message	string

Events

onSentonError

Category: socialNo children

Email SenderEmailSender

Send emails via device email app

Properties

Name	Type	Default
to	string
subject	string
body	string

Events

onSent

Category: socialNo children

Phone CallPhoneCall

Initiate a phone call via device dialer

Properties

Name	Type	Default
phoneNumber	string

Events

onCallStarted

Category: socialNo children

Media20

Flashlight / TorchFlashlight

Control the device flashlight/torch

Category: mediaNo children

Battery StatusBatteryStatus

Get device battery level and charging status

Events

onBatteryChange

Category: mediaNo children

AccelerometerAccelerometer

Detect device motion and orientation changes

Properties

Name	Type	Default
updateInterval	number	100

Events

onAccelerometerChange

Category: mediaNo children

GyroscopeGyroscope

Detect device rotation rate

Properties

Name	Type	Default
updateInterval	number	100

Events

onGyroscopeChange

Category: mediaNo children

Bluetooth AdminBluetoothAdmin

Check Bluetooth status, enable/disable, get device name and address

Events

onStateChanged

Category: mediaNo children

Bluetooth ClientBluetoothClient

Connect to other Bluetooth devices — Arduino, printers, sensors. Your app initiates the connection.

Properties

Name	Type	Default
uuid	string	00001101-0000-1000-8000-00805F9B34FB
secure	boolean	true

Events

onConnectedonDisconnectedonDataReceivedonError

Category: mediaNo children

Bluetooth ServerBluetoothServer

Accept incoming Bluetooth connections — your app listens and waits for other devices.

Properties

Name	Type	Default
uuid	string	00001101-0000-1000-8000-00805F9B34FB
name	string	CodularBT

Events

onClientConnectedonClientDisconnectedonDataReceivedonError

Category: mediaNo children

NFC Reader/WriterNFC

Read and write NFC tags

Events

onTagReadonTagWrittenonError

Category: mediaNo children

Arduino / SerialArduino

Communicate with Arduino and serial devices over Bluetooth or USB

Properties

Name	Type	Default
connectionType	select	bluetooth
baudRate	select	9600
delimiter	string	\n

Events

onDataReceivedonConnectedonDisconnectedonError

Category: mediaNo children

FTP ClientFTP

Upload and download files via FTP/SFTP server

Properties

Name	Type	Default
host	string
port	number	21
username	string
password	string
secure	boolean	false

Events

onConnectedonUploadCompleteonDownloadCompleteonError

Category: mediaNo children

Network StatusNetworkStatus

Check internet connectivity — WiFi, mobile data, offline detection

Events

onConnectedonDisconnectedonTypeChanged

Category: mediaNo children

PrinterPrinter

Print documents, images, or HTML content to any connected printer (WiFi, USB, system print dialog)

Properties

Name	Type	Default
printType	select	html
content	string
jobName	string	Print Job

Events

onPrintCompleteonPrintErroronPrintCancelled

Category: mediaNo children

Thermal PrinterThermalPrinter

Print receipts and labels via Bluetooth or USB thermal printer (ESC/POS compatible)

Properties

Name	Type	Default
connectionType	select	bluetooth
deviceAddress	string
port	number	9100
paperWidth	select	58
encoding	select	UTF-8

Events

onConnectedonDisconnectedonPrintCompleteonError

Category: mediaNo children

WiFi StatusWifiStatus

Get WiFi connection status and network info

Events

onWifiChange

Category: mediaNo children

Screen BrightnessScreenBrightness

Get and set screen brightness level

Category: mediaNo children

Text to SpeechTextToSpeech

Convert text to spoken audio

Properties

Name	Type	Default
language	select	en-US
pitch	number	1
rate	number	1

Events

onSpeakStartonSpeakDoneonError

Category: mediaNo children

Speech to TextSpeechToText

Convert spoken audio to text using device microphone

Properties

Name	Type	Default
language	select	en-US
continuous	boolean	false

Events

onResultonPartialResultonError

Category: mediaNo children

File PickerFilePicker

Pick any file from device storage

Properties

Name	Type	Default
fileTypes	select	/
multiple	boolean	false

Events

onFilePickedonError

Category: mediaNo children

File DownloaderFileDownloader

Download files from URL to device storage

Properties

Name	Type	Default
url	string
fileName	string

Events

onDownloadCompleteonDownloadProgressonError

Category: mediaNo children

GeofencingGeofencing

Monitor when device enters or exits a geographic area

Properties

Name	Type	Default
latitude	number	0
longitude	number	0
radius	number	100

Events

onEnteronExit

Category: mediaNo children

Flow Nodes Reference

Visual logic building blocks - connect nodes to create app behavior

Trigger

Event (Start)

The starting point of a flow. Every flow begins here.

event

Action

Navigate to Screen

Go to another screen in your app.

navigate

Set Variable

Store a value in a variable for later use.

setVariable

Show Alert

Show a popup alert dialog with a title and message.

showAlert

Show Toast

Show a brief message at the bottom of the screen.

showToast

API Call

Send an HTTP request to a web API and get data back.

apiCall

Delay / Wait

Wait for a specified time before continuing.

delay

Logic

If / Else

Branch the flow based on a condition (true/false).

ifElse

Loop

Repeat a set of actions multiple times.

loop

Switch

Choose one of many paths based on a value.

switch

Data

Get Variable

Read the current value of a stored variable.

getVariable

Transform Data

Transform data using map, filter, or other operations.

transform

Console Log

Print a debug message to the console (for testing).

log

Storage

Save to Storage

Save a value to device storage. Persists when app is closed.

saveToStorage

Load from Storage

Load a previously saved value from device storage.

loadFromStorage

Remove from Storage

Delete a saved value from device storage.

removeFromStorage

Cloud DB

Read from Database

Fetch rows from a Supabase/Firebase table.

dbRead

Insert into Database

Add a new row to a Supabase/Firebase table.

dbInsert

Update in Database

Update existing rows in a table.

dbUpdate

Delete from Database

Delete rows from a table.

dbDelete

Auth

authSignIn

Create a new user account with email and password.

authSignUp

Sign Out

Sign the current user out of the app.

authSignOut

Get Current User

Get the signed-in user's info.

authGetUser

Social

Open native share dialog with text, URL, or image.

Open URL

Open a web URL in the browser.

openUrl

Copy to Clipboard

Copy text to the device clipboard.

copyToClipboard

Vibrate

Vibrate the device for haptic feedback.

vibrate

Show Ad

Show an interstitial, rewarded, or app open ad.

showAd

Load Ad

Pre-load an ad so it's ready to show instantly.

loadAd

Firebase

Firestore Get

Get a document or query a collection from Firestore.

firestoreGet

Firestore Set

Create or update a document in Firestore.

firestoreSet

Firestore Delete

Delete a document from Firestore.

firestoreDelete

Realtime DB Get

Read data from Firebase Realtime Database.

firebaseDbGet

Realtime DB Set

Write data to Firebase Realtime Database.

firebaseDbSet

Send Notification

Send a push notification via FCM.

sendNotification

Log Analytics Event

Log a custom event to Firebase Analytics.

logAnalyticsEvent

Media

Take Photo

Take a photo using the device camera.

takePhoto

Pick Image

Pick an image from the device gallery.

pickImage

Scan QR Code

Scan a QR code or barcode.

scanQR

Get Location

Get the device's current GPS coordinates.

getCurrentLocation

Play Audio

Play an audio file or URL.

playAudio

Play Lottie

Play a Lottie animation component.

playLottie

Pause Lottie

Pause a Lottie animation.

pauseLottie

Reset Lottie

Reset a Lottie animation to the beginning.

resetLottie

Payments

Initiate Payment

Start payment via Razorpay, Stripe, or PayPal.

initiatePayment

Verify Payment

Verify payment with backend server.

verifyPayment

Restore Purchases

Restore in-app purchases.

restorePurchases

Purchase Product

Buy via Google Play Billing.

purchaseProduct

Check Subscription

Check if subscription is active.

checkSubscription

Cancel Subscription

Open Play Store to cancel subscription.

cancelSubscription

Play Store

Request Review

Show in-app review dialog.

requestReview

Check for Update

Check if new version available.

checkUpdate

Open Play Store

Open app's Play Store listing.

openPlayStore

Switch Tab

Switch active tab on BottomTabs.

switchTab

Device

Biometric Auth

Fingerprint or Face ID authentication.

authenticate

Toggle Flashlight

Turn flashlight on/off.

toggleFlashlight

Get Battery Level

Get battery percentage.

getBatteryLevel

Set Brightness

Set screen brightness.

setBrightness

Communication

Send SMS

Open SMS app with pre-filled message.

sendSMS

Send Email

Open email app.

sendEmail

Make Call

Open phone dialer.

makeCall

Speech

Speak Text

Text-to-speech.

speak

Stop Speaking

Stop TTS.

stopSpeaking

Start Listening

Speech-to-text.

startListening

Stop Listening

Stop recognition.

stopListening

Files

Pick File

Select file from device.

pickFile

Download File

Download from URL.

downloadFile

Timer

Start Timer

Start countdown.

startTimer

Pause Timer

Pause countdown.

pauseTimer

Reset Timer

Reset to start.

resetTimer

Start Stopwatch

Count up.

startStopwatch

Stop Stopwatch

Stop counting.

stopStopwatch

Notifications

Schedule Notification

Local notification.

scheduleNotification

Cancel Notification

Cancel scheduled.

cancelNotification

Sensors

Scan Bluetooth

Find BLE devices.

startBluetoothScan

Connect Bluetooth

Connect to BLE.

connectBluetooth

Read NFC

Read NFC tag.

readNFC

Write NFC

Write to NFC.

writeNFC

Start Geofence

Monitor area.

startGeofence

Extensions

Extend Codular with custom components and flow nodes. Create your own, import from the community, or share with others.

What Extensions Can Do

Custom Components

Add new UI components with custom properties and events. They appear in the Extensions category of the palette.

Custom Flow Nodes

Add new flow nodes with configurable inputs. They appear in the Nodes sidebar under your extension's name.

Share & Import

Export as .codular-ext files, publish to the community marketplace, or import extensions from other users.

Creating an Extension

Open your project in the builder

Go to Project > Extensions from the menu bar

In the Create Component tab, define your component's name, properties, events, and optional flow nodes

Click "Add to This Project" to register it immediately, or "Export .codular-ext" to save as a file

Your extension appears in the Extensions category (puzzle icon) in the component palette

Custom flow nodes appear in the Nodes sidebar under your extension's name

Extension Definition Format

{
  "type": "custom_rating_stars",
  "label": "Rating Stars",
  "description": "A star rating component",
  "icon": "Star",
  "acceptsChildren": false,
  "props": [
    { "name": "maxStars", "label": "Max Stars", "type": "number", "defaultValue": 5 },
    { "name": "color", "label": "Star Color", "type": "color", "defaultValue": "#f59e0b" }
  ],
  "events": ["onRatingChange"],
  "flowNodes": [
    {
      "type": "ext_set_rating",
      "label": "Set Rating",
      "description": "Set the rating value programmatically",
      "icon": "Star",
      "color": "#f59e0b",
      "inputs": [
        { "name": "value", "label": "Rating Value", "type": "number", "defaultValue": 0 },
        { "name": "targetVar", "label": "Save to Variable", "type": "variable", "defaultValue": "" }
      ]
    }
  ]
}

Importing Extensions

From file: Go to Project > Extensions > Import tab. Select a .codular-ext file.

From community: Browse the Community page, find an extension, and click Install.

The extension is registered in your project and saved automatically.

Properties & Events

Properties

Every component has configurable properties. Select a component on the canvas, and its properties appear in the right panel.

Property Type	Description	Example
string	Text value	Button label, placeholder text
number	Numeric value	Font size, border radius
boolean	True/false toggle	Visible, disabled
color	Color picker	Background color, text color
select	Dropdown options	Alignment, resize mode
image	Image URL or asset	Image source, icon
variable	Bind to a variable	Dynamic text, list data

Events

Events fire when users interact with components. Connect events to flows to define behavior.

onPress

User taps the component

Used by: Button, Card, Container

onChange

Value changes (text input, switch)

Used by: TextInput, Switch, Slider

onSubmit

Form is submitted

Used by: TextInput

onLoad

Screen finishes loading

Used by: Screen

onRefresh

Pull-to-refresh triggered

Used by: SwipeRefresh

onTabChange

Tab selection changes

Used by: BottomTabs, TabLayout

Storage & API

Local Storage

Save data on the device that persists when the app is closed. Use the Save to Storage, Load from Storage, and Remove from Storage flow nodes.

Cloud Database (Supabase / Firebase)

Connect to Supabase or Firebase to store data in the cloud. Use the Cloud DB flow nodes (Read, Insert, Update, Delete).

Supabase Setup

Create project at supabase.com
API URL = Settings > API > Project URL
API Key = Settings > API > anon public key
Create tables in Table Editor first

Firebase Setup

Create project at console.firebase.google.com
API URL = Realtime Database URL
API Key = Project Settings > Web API Key
No google-services.json needed (REST API)

API Call

Use the API Call flow node to send HTTP requests. Supports GET, POST, PUT, DELETE methods. The response is automatically parsed as JSON and can be stored in a variable.

Asset Storage

Images and files are uploaded to Mobcraft Storage (cloud CDN). Each project gets its own folder. Max 50MB per file, 2GB total on the free tier.

Type	Formats	Use In
Images	PNG, JPG, WebP, GIF, SVG	Image component, Background Image, Avatar
Fonts	TTF, OTF, WOFF, WOFF2	Font Family picker in Style panel
Lottie	JSON (Lottie animation files)	LottieAnimation component
Video	MP4, WebM, MOV	Video component
Audio	MP3, WAV, FLAC, AAC	AudioPlayer component, Play Audio flow node

Lottie Animations

Add rich animations to your app using Lottie. Upload a .json Lottie file to Assets, then use the LottieAnimation component.

LottieAnimation

Drag onto screen. Set source to a Lottie JSON URL or pick from assets.

Flow Control

Use Play Lottie, Pause Lottie, Reset Lottie nodes to control animations.

Events

onAnimationFinish, onAnimationLoop, onPress - trigger flows when animation completes.

Custom Fonts

Upload .ttf, .otf, or .woff font files in the Assets Manager. They appear in the Font Family dropdown in the Style panel for any text component.

Themes

Customize your app's appearance globally. Theme values are applied to all components.

Property	Default	Description
primaryColor	#3b82f6	Main brand color (buttons, links, active states)
secondaryColor	#8b5cf6	Accent color for secondary actions
backgroundColor	#f8fafc	App background color
surfaceColor	#ffffff	Card/surface background color
textColor	#0f172a	Primary text color
textSecondaryColor	#64748b	Secondary/muted text color
errorColor	#ef4444	Error states and validation messages
fontFamily	System	Default font for all text
borderRadius	8	Default border radius (px)

Edit themes in Project Settings or via the Theme panel in the builder.

Build & Export

Generate installable apps from your Codular project.

Android APK

Debug APK for testing on Android devices. Install directly - no Play Store needed.

Android AAB

App Bundle for publishing to Google Play Store. Smaller download size, optimized delivery.

How to Build

Save your project (Cmd+S or click Save)

Click the Build button in the toolbar

Choose APK (testing) or AAB (Play Store)

Wait for the build to complete (usually 2-5 minutes)

Download the built file when ready

iOS Support

iOS IPA builds are coming soon. Requires a macOS build server and Apple Developer account.

Companion App

Test your app live on your phone while you build. Changes appear instantly.

How to Connect

Open your project in the builder

Go to Project > Companion from the menu bar

A 6-character code appears - note it down

On your phone, open the Codular Companion app (or browser)

Enter the code to connect

Your app appears live on your phone - changes sync in real-time

Requirements

Phone and computer must be on the same WiFi network
Use your computer's local IP address (shown in the companion modal)
Companion works in any mobile browser - no app install required

Prefer Live Reload?

For testing the actual installed app (not a web preview), use Live Reload instead. It updates your real APK in real-time over USB or WiFi. See the Live Reload & USB Debug section.

Live Reload & USB Debug

Test your app changes instantly on your phone without rebuilding. Works over USB and WiFi.

Quick Start

Build and install your APK on the phone (one time only)

Open the Test menu in the builder menu bar

Click 'Live Reload' to enable it

Edit anything in the builder - text, styles, components, flows

Your phone updates automatically within 1-2 seconds

Connection Modes

USB Mode (Fastest)

Phone connected via USB cable. Updates in ~1 second.

Enable USB Debugging on phone
Connect via USB cable
Open USB Debug panel or use Test menu
Click Launch App (auto-enables Live Reload)

WiFi / Cloud Mode

No cable needed. Works over internet. Updates in ~2 seconds.

Phone connected to WiFi or mobile data
App installed with Live Reload support
Enable Live Reload from Test menu
Works from anywhere - no USB required

USB Debug Panel

The USB Debug panel (click USB icon in toolbar) provides full device management:

Install APK

Install the latest built APK on connected device

Launch App

Launch the app and auto-enable Live Reload

Screenshot

Capture a screenshot from the device

Watch Logs

View React Native error logs in real-time

Live Reload

Toggle real-time sync of builder changes

Device Selector

Choose which connected device to target

What Updates Live?

Updates Instantly

Text, colors, styles, components, layout, flows, variables, icons, background images, screens

Needs Rebuild

Native modules (camera, maps), app icon, splash screen, package name, new native packages

Live Reload Indicator

When Live Reload is active, a green "LIVE" badge appears in the top-right corner of your app on the phone. This confirms the connection is working. The badge never appears in production builds.

AI Assistant

Codular includes a built-in AI assistant that helps you build apps faster.

What AI Can Do

Generate Screens

Describe a screen and AI creates it with components, layout, and styling.

Add Components

Ask AI to add specific components to your current screen.

Create Flows

Describe app logic and AI generates the flow with connected nodes.

Modify Styles

Ask AI to change colors, spacing, fonts, or layout across your app.

How to Use

Click the chat icon in the toolbar to open the AI panel. Type your request in natural language.

Example Prompts

"Create a login screen with email and password fields"
"Add a todo list with an input field and add button"
"Make the button blue with rounded corners"
"Create a flow that saves the input text to a list when the button is pressed"