Construção visual bem feita.

Reunimos todo o nosso conhecimento em desenvolvimento de aplicativos para dispositivos móveis e web em uma ferramenta intuitiva baseada em navegador.

Add
Layers
Screens
Themes
Navigation
Assets
Settings
Profile
Componentes prontos
dribble
Publicar backoffice
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
Title
Now Playing
List Item
Progress
Push Notifications
Location Permissions
Text SMS
-
0
+
Add to Cart
Hello!
A
Task #1
Task #2
Profile
First, Last
Email
Edit
Title
Now Playing
List Item
Progress
Push Notifications
Location Permissions
Text SMS
-
0
+
Add to Cart
Hello!
A
Task #1
Task #2
Profile
First, Last
Email
Edit
Screen
Navegação
Today
Progress
112 5th Ave
Directions ›
Add Notes
Icon
View
Text
Image BG
Image
Map
Video
Web View
Avatar
Divider
Scroll View
Blur View
Container
KB Avoiding View
Icon
View
Text
Image BG
Image
Map
Video
Web View
Avatar
Divider
Scroll View
Blur View
Container
KB Avoiding View
List
Query
Radio Button
Checkbox
Touchable
Switch
TextInput
Slider
Carousel
Fields
Buttons
Progress
Cards
Custom Block
List
Query
Radio Button
Checkbox
Touchable
Switch
TextInput
Slider
Carousel
Fields
Buttons
Progress
Cards
Custom Block

Construa qualquer coisa.

Buttons

Componentes de baixo nível que permitem criar qualquer coisa a partir do zero. Blocos

Blocos

Componentes de ordem superior para ajudá-lo a se mover rapidamente. Adicionar código personalizado

Codigo aberto

Injete código-fonte personalizado em qualquer tela do seu aplicativo..

Crie seu sistema de design.

Themes

Personalize a aparência do seu aplicativo. Fontes e ícones.

Fonts and Icons

Controle de baixo nível de todos os detalhes do seu aplicativo. Componentes salvos.

Blocos reaproveitaveis

Crie seus próprios blocos e salve-os para reutilização em todo o aplicativo..

System Theme
New Theme
CerebriSans
Bold
Headline1
Aa
7811 Icons
Elevation 1
Elevation 2

Reatividade

Navigation

Crie navegadores complexos, incluindo guias e pilhas de telas. Ações , simplesmnete movimentando as peças

Interações de ações

Anexe interações a qualquer componente do seu aplicativo. Gerenciamento de Estado e eventos

Reatividade

Ligado a um servidor nodeJS em tempo de desenvolvimento você pode acompanhar toda mudança de estado em tempo real sem refresh de tela.

Navigation
Project Log
Add Photo
$2,000
Phase 1
$4,000
Phase 2
Tasks
Projects
Messages
Today
Progress
112 5th Ave
Directions ›
Add Notes

Gerencie multiplos projetos.

Meu grupo de projetos
Phase 2
1. Remove Existing Piping
Edit
Existing piping has been removed.
Inspection completed and site has
been prepared for Phase 3.
Project Log
All Projects
+
View All
Hide Fields
Filter
Group
Project Name
Project Details
Attachment(s)
Last Updated
Status
Demolition Work
Job site is now pre..
3/10/2020
Completed
Pipe Installation
Existing piping has..
Today
import { Camera } from 'expo-camera';
import { Fetch } from 'react-request';

Acesse APIs diretamente

Interaja com qualquer fonte de dados externa conectada via API REST, usando blocos pre montados para agilizar o trabalho

Adicionar integraçõesEm breve

Conecte seu aplicativo diretamente a plataformas de terceiros com integrações personalizadas suportadas.

Depurador de Bugs para testes em tempo real.

Code Lego Transpile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
import React from 'react';
import {
withTheme,
Container,
Button,
ScreenContainer,
Image,
FieldSearchBarFull,
} from '@draftbit/ui';
import { StyleSheet, ScrollView, Text, View } from 'react-native';
import Images from '../config/Images';

class Listings extends React. Component {
state = { searchBarValue: undefined };

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

return (
<ScreenContainer scrollable={ false} hasSafeArea={true}>
<ScrollView
showsVerticalScrollIndicator={ true}
showsHorizontalScrollIndicator={true}
bounces={ true}
horizontal={false}
contentContainerStyle={ styles.scrollViewGw}
>
<Container
elevation={0}
useThemeGutterPadding={true}
style={styles.containerBG}
>
<Text
accessible={true}
style={StyleSheet.flatten([
theme.typography.headline1,
{ color: theme. colors.primary }
])}
>
Aplicativo Exemplo
</Text>
</Container>
<Container
elevation={0}
useThemeGutterPadding={ true}
style={styles.containerWH}
>
<Container
useThemeGutterPadding={true}
elevation={0}
style={Stylesheet.flatten([
styles. containerJz,
{
backgroundColor: theme.colors. primary,
borderRadius: theme.borderRadius. button,
},
])}
>
<FieldSearchBarFull
icon=" Feather/search"
placeholder="Search"
value={this.state.searchBarValue}
onChange={searchBarValue => this. setState({ searchBarValue })}
/>
</Container>
<View style={styles.viewTQ}>
<Button
type="solid"
color={ theme.colors.light}
labelColor={theme.colors. primary}
>
Place
</Button>
</Button>
type="solid"
labelColor={ theme.colors.primary}
color={theme.colors. light}
style={styles. nbuttonGj}
>
Room
</Button>
</View>
</Container>
style={styles.viewYi}>
<Container>
elevation={0}
useThemeGutterPadding={ true}
style={StyleSheet. flatten([
styles. containerFR,
{
borderColor: theme.colors. light,
backgroundColor: theme.colors.light,
},
])}
>
<Container
elevation={0}
useThemeGutterPadding={true}
style={styles. container74}
>
<Image
resizeMode="contain"
source={Images. SkylineLofts}
style={styles. imageTb}
/>
<Container
useThemeGutterPadding={ true}
elevation={ 0}
style={ styles. containerR0}
>
<Text
style={ StyleSheet. flatten([
styles. textBo
theme. typography. headline4,
{ color: theme. colors. primary },
})}
>
Skyline Lofts
</Text>
<Text
style={ StyleSheet. flatten([
theme. typography. body2,
{ color: theme. colors. primary },
])}
>
Chicago, IL
</Text>
</Container>
</Container>
<Container elevation={ 0} useThemeGutterPadding={ true}
>
<Text
style={ StyleSheet. flatten([
theme. typography. body2,
{ color: theme. color. primary },
])}
>
2 bedrooms · 2 beds · 1 bath
</Text>
</Container>
</Container>
</View>
</ScrollView>
</ScreenContainer>
);
}
}

const styles = StyleSheet. create({
container74: {
flexDirection: ' row',
alignItems; ' center',
justifyContent: ' space-between',
},
container8G: {
alignItems: ' center',
flexDirection:' row',
paddingTop: 20,
paddingBottom: 20,
},
containerJz: {
marginBottom: 20,
},
scrollViewGw: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
containerFr: {
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 10,
paddingTop: 10,
marginTop: 10,
marginBottom: 10,
},
textBo: {
marginBottom: 4,
},
imageTb: {
height: 120,
width: 120,
},
containerR0: {
alignItems: ' flex-start',
},
buttonGj: {
marginLeft: 10,
},
containerWh: {
alignSelf: ' stretch',
paddingBottom: 20,
paddingTop: 20,
flexGrow: 0,
paddingRight: 10,
paddingLeft: 10,
alignItems: ' flex-start',
},
viewTQ: {
flexDirection: ' row',
alignItems: ' center',
justifyContent: ' flex-end',
},
});

export default withTheme(Listings);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
import React from 'react';
import {
withTheme,
Container,
Button,
ScreenContainer,
Image,
FieldSearchBarFull,
} from '@draftbit/ui';
import { StyleSheet, ScrollView, Text, View } from 'react-native';
import Images from '../config/Images';

class Listings extends React. Component {
state = { searchBarValue: undefined };

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

return (
<ScreenContainer scrollable={ false} hasSafeArea={true}>
<ScrollView
showsVerticalScrollIndicator={ true}
showsHorizontalScrollIndicator={true}
bounces={ true}
horizontal={false}
contentContainerStyle={ styles.scrollViewGw}
>
<Container
elevation={0}
useThemeGutterPadding={true}
style={styles.containerBG}
>
<Text
accessible={true}
style={StyleSheet.flatten([
theme.typography.headline1,
{ color: theme. colors.primary }
])}
>
Aplicativo Exemplo
</Text>
</Container>
<Container
elevation={0}
useThemeGutterPadding={ true}
style={styles.containerWH}
>
<Container
useThemeGutterPadding={true}
elevation={0}
style={Stylesheet.flatten([
styles. containerJz,
{
backgroundColor: theme.colors. primary,
borderRadius: theme.borderRadius. button,
},
])}
>
<FieldSearchBarFull
icon=" Feather/search"
placeholder="Search"
value={this.state.searchBarValue}
onChange={searchBarValue => this. setState({ searchBarValue })}
/>
</Container>
<View style={styles.viewTQ}>
<Button
type="solid"
color={ theme.colors.light}
labelColor={theme.colors. primary}
>
Place
</Button>
</Button>
type="solid"
labelColor={ theme.colors.primary}
color={theme.colors. light}
style={styles. nbuttonGj}
>
Room
</Button>
</View>
</Container>
style={styles.viewYi}>
<Container>
elevation={0}
useThemeGutterPadding={ true}
style={StyleSheet. flatten([
styles. containerFR,
{
borderColor: theme.colors. light,
backgroundColor: theme.colors.light,
},
])}
>
<Container
elevation={0}
useThemeGutterPadding={true}
style={styles. container74}
>
<Image
resizeMode="contain"
source={Images. SkylineLofts}
style={styles. imageTb}
/>
<Container
useThemeGutterPadding={ true}
elevation={ 0}
style={ styles. containerR0}
>
<Text
style={ StyleSheet. flatten([
styles. textBo
theme. typography. headline4,
{ color: theme. colors. primary },
})}
>
Skyline Lofts
</Text>
<Text
style={ StyleSheet. flatten([
theme. typography. body2,
{ color: theme. colors. primary },
])}
>
Chicago, IL
</Text>
</Container>
</Container>
<Container elevation={ 0} useThemeGutterPadding={ true}
>
<Text
style={ StyleSheet. flatten([
theme. typography. body2,
{ color: theme. color. primary },
])}
>
2 bedrooms · 2 beds · 1 bath
</Text>
</Container>
</Container>
</View>
</ScrollView>
</ScreenContainer>
);
}
}

const styles = StyleSheet. create({
container74: {
flexDirection: ' row',
alignItems; ' center',
justifyContent: ' space-between',
},
container8G: {
alignItems: ' center',
flexDirection:' row',
paddingTop: 20,
paddingBottom: 20,
},
containerJz: {
marginBottom: 20,
},
scrollViewGw: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
containerFr: {
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 10,
paddingTop: 10,
marginTop: 10,
marginBottom: 10,
},
textBo: {
marginBottom: 4,
},
imageTb: {
height: 120,
width: 120,
},
containerR0: {
alignItems: ' flex-start',
},
buttonGj: {
marginLeft: 10,
},
containerWh: {
alignSelf: ' stretch',
paddingBottom: 20,
paddingTop: 20,
flexGrow: 0,
paddingRight: 10,
paddingLeft: 10,
alignItems: ' flex-start',
},
viewTQ: {
flexDirection: ' row',
alignItems: ' center',
justifyContent: ' flex-end',
},
});

export default withTheme(Listings);
Add
Layers
Screens
Themes
Navigation
Assets
Settings
Profile
Componentes prontos
Publish
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
Aplicativo Exemplo
Place
Room
Add Plugin Code Lego
Add Plugin Code Lego
Screen
Navegação

Código de tela instantâneo

O código-fonte gera ao vivo conforme você cria. Copie-o para a área de transferência com um clique do mouse.

Download completo do código fonte

Exporte toda a sua compilação como um pacote limpo e pronto para repo.

Código fonte completamente aberto

Todo o código-fonte é baseado em bibliotecas e idiomas de código aberto.

Duplique Versões, experimente e compartilhe..

CodeLego V1
10 Screens
CodeLego V2
20 Screens
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
CodeLego_V2.zip

Visualizar como produção

Renderizações perfeitas em pixels em seu dispositivo usando a Visualização ao vivo

Publicar rapidamente

Implante um build de rascunho na Web em alguns momentos.

Compartilhe Facilmente

Obtenha uma página de destino particular para seu projeto que você possa compartilhar com qualquer pessoa.

Colabore com outras pessoas.

Convide seu time

Adicione colaboradores aos seus espaços de trabalho para construir juntos.

Freelancer e agência de suporteBreve

Áreas de trabalho ilimitadas e colaboração ilimitada por um preço fixo.

Publique seu aplicativo.

Calendar
Clock
Settings
Camera
App Store
Activity
Photos
Facetime
Reminders
Stocks
Find My
Maps
Expo
6,174
‹ Apps
Codelego
codelego.io ide developer.
Get
5.0
4+
56 Ratings
Age

Publicar várias versões

Com controle de versão e aplicativos de rascunho.

Crie versões de produção

Você pode lançar versões diferentes do seu app e realizar testes com grupos de usuarios segmentados

Distribuição empresarial

Scripts e plugins personalizados e distribuição gerenciada para empresas.

Domínios personalizados

Publique seu PWA em seu próprio domínio.

Solicite acesso à versão beta privada.