Connecting Data
Bind a list to one of your collections, read fields from each record, and preview the screen with your own data — before a line of code exists.
Data sources
Select any element and open the Data tab. A source decides where the element's content comes from:
collectionRepeats this element for each record. Lists and grids only.fieldReads one field from a scope an ancestor opened.current-userOpens a scope holding the signed-in user.gateShows this element only when signed in, or only when signed out.Binding a list
Select a list and set its source to collection. The Collection dropdown lists your project's actual collections — you are choosing from what exists rather than typing a name and hoping.
Scope name is what each record is called inside the list — song, item. Children read fields through that name. Order by and Limit shape the query.
A list holds exactly one child: the row template, repeated per record.
Reading fields
Inside a bound list, select a text or image and set its source to field. Choose the scope it reads from, then the field path.
The path dropdown shows fields actually present in that collection's records. Koolbase is schema-free, so these are sampled from your data rather than declared — the panel tells you how many records were looked at, and you can always type a path that does not exist yet.
System fields
id, createdAt, updatedAt and createdBy are available on every record alongside your own fields.The signed-in user
Set a container's source to current-user to open a scope holding the signed-in user, then read email, name or avatarUrl from it in the usual way.
Use gate to show something only to signed-in visitors — a profile menu, say — or only to signed-out ones.
Actions
The Actions tab decides what a tap does — navigation, feedback, a write, an upload, a function call, an image pick, a change to state. Effects chain: an action's on success may be another effect, so picking an image, uploading it and saving the path is three primitives rather than one special case:
navigateOpen another screen.backReturn to the previous screen.selectTabSwitch bottom-navigation tabs without stacking screens.createRecordInsert a record, with values from inputs on the screen.signOutSign the current user out.Preview with real records
Press Preview and the canvas fetches real records for every bound collection — up to ten of the most recent, in the order the binding specifies. Taps run: navigation moves between screens, tabs switch, and an empty collection shows the empty state your design defines rather than invented rows.
Filters are not applied in preview
In the exported app
A bound list becomes KoolbaseCollectionList and a bound grid KoolbaseCollectionGrid — the SDK's own widgets, so caching, refresh and the loading and error states are handled rather than reimplemented. Auth gating becomes KoolbaseAuthGate.