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

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

Coming Soon

Web_support
Web Support
Prototyping_animation
Prototyping & Animation
Flutter
Flutter