DesignCode

Beautiful, Readable & Editable Code

Go from Design to Code & Code to Design anytime during the development

keyboard_arrow_left Your music
  • Ghost stories
    Coldplay
    more_vert
shuffle skip_previous play_circle_outline skip_next repeat
1:152:45

import React, { Component } from "react";
import Svg, { Ellipse } from "react-native-svg";
import { View, StyleSheet } from "react-native";
export default class Untitled extends Component {
  render() {
   return (
    <View style={styles.root}>
      <View style={styles.header}>
        <Text style={styles.text}>Music</Text>
      </View>
      <Svg
        preserveAspectRatio="none"
       viewBox="0 0 100 100"
       style={styles.ellipse1}
      >
      <Ellipse  cx={50}   cy={50}  rx={50}   ry={50}
      fill="rgba(55,131,126,1)"  strokeWidth={0}
      />
   </Svg>
</View>
);
}

Writes React Native like a Developer

Sketch Import

Seamlessly convert Sketch designs to React Native UI

Sketch Sketch
BuilderX BuilderX

React Native React Native

Components System

Reuse Code and Design like a Boss

Use Material and Cupertino UI Kits or Build your own Toolkit

Responsive

Use Flex Layout or Absolute Postioning & Create Fluidic Designs for your app

Contents in your design will be responsive to any change in Parent Components using Flex Layout or Position: "Absolute"

Conditionals

Design for Custom States into one Single Screen

Orientation specific, Platform specific or Custom State specific designs, Simplified in One Single Screen, using Conditionals

Share & Export

Design and Export Images

Export your design as an Artboard, BuilderX lets you share it with your team as .png image files

Conferences and Events

Design meets code with BuilderX at React Europe, Paris

May 2018

More on the Roadmap

Web_support
React Web Support
Prototyping_animation
Prototyping & Animation
Flutter
Flutter

Stay up-to-date with BuilderX news

Please enter a valid email address