Learn DRAFTBIT with Real Code Examples

Create Draftbit account

Start a new project

Connect data sources (REST APIs, Supabase, Firebase, etc.)

Design screens using visual builder

Preview on device or export code

Create Draftbit project

Select template or blank project

Configure API sources

Set up navigation

Preview or export

app.json (Expo config)

navigation/routes.js

theme files

API service files

Component JSON metadata in builder

npm install (after code export)

expo start

expo build

eas build

npm run android / ios

Use APIs for localized text

Implement i18n after exporting code

Store translations externally

RTL support depends on React Native

Dynamic content delivered via API

Supports React Native accessibility features

Alt text, roles, and ARIA via component props

Theming ensures better contrast

Developers can enhance accessibility in exported code

Screen reader compatibility through RN

Theme-based colors, fonts, and spacing

Flexbox layout

Responsive sizing controls

Custom styles via code export

Component-level overrides

Handled via component props

API responses populate UI state

Custom logic after code export

Redux/MobX usable only in exported code

Local component state for simple UI

REST APIs for data

Bindings for lists, forms, and details

Input components update backend

Use pagination for large datasets

Custom data logic available in code export