Create any app, 10x faster.

With Draftbit, you can build native mobile apps, responsive web apps, and internal tools visually and collaboratively. Source code included, so you're never locked-in.

A powerful tool with a simple interface.

Design, Build, Test, and Publish all from the same place.

West Coast Villa
San Diego, CA
Amenities
Free parking on premises
P
Wifi
W
5 nights
Reserve
Search Listings
Place
Room
2 bedrooms · 2 beds · 1 bath
3 bedrooms · 3 beds · 2 baths
Add
Layers
Screens
Themes
Navigation
Assets
Settings
Profile
New App
Screens (8)
Listings
Places
Rooms
Settings
Login
Components
Screen
ScrollView
Container
Image
Fetch
Icon Button
View
View
Text
Text
Fetch
View
Touchable
Map
Fetch
View
View
Text
Icon
View
View
Text
Icon
Live Preview
Scan the QR code with your device.
Close
Restart Session
Need the live preview app?
Download expo for iOS or Android to connect, or enter your email / phone and we'll send you a link.
Email or phone number
Design
Navigate
Preview
West Coast Villa
San Diego, CA
Amenities
Free parking on premises
P
Wifi
W
5 nights
Reserve
Search Listings
Place
Room
2 bedrooms · 2 beds · 1 bath
3 bedrooms · 3 beds · 2 baths
Publish
Commit
Screens (8)
Recent
Bits
Saved
Basic
Basic
Icon
View
Text
Media
Image
Video
Layout
Lists & Data
Fetch
List
Draftbit Blocks
Carousel
Fields
Buttons
Headers
Progress
Cards
Your Blocks
Listing Card
Listings Filter
Apply Button
Dock
Inputs & Controls
Touchable
Search Bar
Switch
Checkbox
What can i DESIGN?

Break free from templates.

Build anything you can imagine.

Search Listings
Place
Room
2 bedrooms · 2 beds · 1 bath
3 bedrooms · 3 beds · 2 baths
APIs & Services
Connected
REST API
https://api.github.com/...
Header
Skyline Lofts
Location
Chicago, IL
Bedrooms
2
Beds
2
Baths
1
Image
skyline-lofts.jpg
Header
West Coast Villa
Location
San Diego, CA
Bedrooms
3
Beds
3
Baths
2
Image
west-coast-villa.jpg
Header
Skyline Lofts
Location
Chicago, IL
Bedrooms
2
Beds
2
Baths
1
Image
skyline-lofts.jpg
Header
West Coast Villa
Location
San Diego, CA
Bedrooms
3
Beds
3
Baths
2
Image
west-coast-villa.jpg
Build

Bring your screens to life.

Start quickly with Bits, Blocks and Examples to help you move fast.

Customize every detail with advanced properties, themes and custom code.

Preview as you go on your device, or on the web.

Connect it up by adding actions, interactions, navigation and live data.

Welcome to Rentbit.
import React from 'react';
import {
 StatusBar,
 View,
 StyleSheet,
 KeyboardAvoidingView,
 Text,
} from 'react-native';
import { withTheme, ScreenContainer, Image, TextField } from '@draftbit/ui';
import Images from '../config/Images';

class Login extends React.Component {
 state = {};

 componentDidMount() {
   StatusBar.setBarStyle('dark-content');
 }

 render() {
   const { theme } = this.props;

   return (
<ScreenContainer
       scrollable={false}
       hasSafeArea={true}
       style {styles.screenContainerZc}
>
<KeyboardAvoidingView
         keyboardVerticalOffset={0}
         behavior="padding"
         enabled={true}
         style={styles.keyboardAvoidingView4W}
>
<View style={styles.viewU5}>
<Image
             resizeMode="contain"
             source={Images.LogoPrimary}
             style={styles.image0V}
           />
<Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
>
             Welcome to Rentbit.
</Text>
<TextField
             leftIconMode="inset"
             placeholder="Login with Facebook"
             label="Social Login"
             type="underline"
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             style={styles.textFieldDt}
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Create Your Account"
             label="Create Account"
             error={false}
             type="underline"
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Log In"
             label="Log In"
             error={false}
             type="underline"
           />
</View>
</KeyboardAvoidingView>
</ScreenContainer>
   );
 }
}

const styles = StyleSheet.create({
 viewU5: {
   paddingRight: 16,
   paddingLeft: 16,
   flexGrow: 1,
   justifyContent: 'center',
 },
 screenContainerZc: {
   justifyContent: 'space-between',
 },
 keyboardAvoidingView4W: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 image0V: {
   width: 150,
 },
 textFieldDt: {
   height: 82,
   marginBottom: 16,
 },
});

export default withTheme(Login);
import React from 'react';
import {
 StatusBar,
 View,
 StyleSheet,
 KeyboardAvoidingView,
 Text,
} from 'react-native';
import { withTheme, ScreenContainer, Image, TextField } from '@draftbit/ui';
import Images from '../config/Images';

class Login extends React.Component {
 state = {};

 componentDidMount() {
   StatusBar.setBarStyle('dark-content');
 }

 render() {
   const { theme } = this.props;

   return (
<ScreenContainer
       scrollable={false}
       hasSafeArea={true}
       style {styles.screenContainerZc}
>
<KeyboardAvoidingView
         keyboardVerticalOffset={0}
         behavior="padding"
         enabled={true}
         style={styles.keyboardAvoidingView4W}
>
<View style={styles.viewU5}>
<Image
             resizeMode="contain"
             source={Images.LogoPrimary}
             style={styles.image0V}
           />
<Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
>
             Welcome to Rentbit.
</Text>
<TextField
             leftIconMode="inset"
             placeholder="Login with Facebook"
             label="Social Login"
             type="underline"
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             style={styles.textFieldDt}
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Create Your Account"
             label="Create Account"
             error={false}
             type="underline"
           />
<TextField
             onChangeText={textFieldValue => this.setState({ textFieldValue })}
             value={this.state.textFieldValue}
             secureTextEntry={true}
             leftIconMode="inset"
             placeholder="Log In"
             label="Log In"
             error={false}
             type="underline"
           />
</View>
</KeyboardAvoidingView>
</ScreenContainer>
   );
 }
}

const styles = StyleSheet.create({
 viewU5: {
   paddingRight: 16,
   paddingLeft: 16,
   flexGrow: 1,
   justifyContent: 'center',
 },
 screenContainerZc: {
   justifyContent: 'space-between',
 },
 keyboardAvoidingView4W: {
   flexGrow: 1,
   justifyContent: 'space-between',
 },
 image0V: {
   width: 150,
 },
 textFieldDt: {
   height: 82,
   marginBottom: 16,
 },
});

export default withTheme(Login);
Launch
Get it ready.

With all of your app settings, permissions, and code review.

Deploy to web first

Deploy a PWA of your app in under 60 seconds.

Test the water

Deploy into Apple’s Testflight or Google Play’s beta program.

Submit for release

App store review and publishing, with help from our team of app store veterans.

New App
24 Screens
Invite
New-App.zip
Iterate

Work together to explore & grow your product.

Add team members to collaborate & share feedback. Publish multiple versions to share externally and run user tests. If you need professional help, we’ll help you find a Draftbit Expert to work with.

On our very first project we saved hundreds of hours of engineering time — the value of Draftbit cannot be overstated.
Javier Otero
CEO and Founder, Futurehaus
Javier Otero
CEO and Founder, Futurehaus

Skip the engineering hassle and go from idea to app store in days.

Meet some happy builders

Hear from other builders like you on their experience with
Draftbit and how it's improved their workflow