open-source-labs / ReacType

Please note: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select ‘Open’ from the context menu to run the app. This extra step is necessary since we don’t have an Apple developer license yet.

• Export code as a Next.js project
• Create nestable components/HTML elements using a drag-and-drop canvas
• Add CSS to any element on the canvas
• Components and HTML elements are rendered in the canvas in the same way they'll be rendered in the exported project
• View dynamically generated Next.js or classic React code as you build your project
• Authenticate with Github or email
• Save data for multiple projects in the cloud
• Critical Electron security gaps resolved

• Export code as a Next.js project
• Create nestable components/HTML elements using a drag-and-drop canvas
• Add CSS to any element on the canvas
• Components and HTML elements are rendered in the canvas in the same way they'll be rendered in the exported project
• View dynamically generated Next.js or classic React code as you build your project
• Authenticate with Github or email
• Save data for multiple projects in the cloud
• Critical Electron security gaps resolved

• New tutorial mode integration through the help menu
• The tutorial mode can be exited by completing the tutorial or clicking on the backdrop
  • Modals appear at each step of the tutorial
  • React Native mode implementation
• React Native components can be wireframed onto the canvas
  • Components include View, SafeAreaView, Button, FlatList, Image, Modal, Switch, Text, TextInput, TouchOpacity
  • iPhone X mockup included in the interface for the canvas
  • Switching between modes clears the application state upon confirming through warning popup
  • Components are reflected in the code preview accurately and can be exported as components for any React
  • Native Android or iOS project
• Code preview fully functional and editable
  • Adding components and props are reflected accurately
  • Ace editor integration for editing values
  • Props added no longer crash with certain types and type checking is stricter
  • Prop addition limited to prop type with values added manually through an edit mode
• Image upload functionality fills the root App component with the image fixed to the ratio of the component
  • React Native mockup wraps the App component to allow for uploaded image template to overlay the App component
• Switch to toggle to class or functional component fully functional and reflected accurately on code preview
• Switch to a stateful component added and is reflected accurately on code preview using hooks if the target component is functional
• Component names can be edited by double-clicking on the component name and pressing enter to confirm or escape to cancel
  • Clicking away from the focused component exits name edit mode as well
• History navigation implemented as undo and redo menu actions and keyboard shortcuts
• Application Tree now labels the type of the HTML element or React Native component in each node
• Overall design changes

• New tutorial mode integration through the help menu
• The tutorial mode can be exited by completing the tutorial or clicking on the backdrop
  • Modals appear at each step of the tutorial
  • React Native mode implementation
• React Native components can be wireframed onto the canvas
  • Components include View, SafeAreaView, Button, FlatList, Image, Modal, Switch, Text, TextInput, TouchOpacity
  • iPhone X mockup included in the interface for the canvas
  • Switching between modes clears the application state upon confirming through warning popup
  • Components are reflected in the code preview accurately and can be exported as components for any React
  • Native Android or iOS project
• Code preview fully functional and editable
  • Adding components and props are reflected accurately
  • Ace editor integration for editing values
  • Props added no longer crash with certain types and type checking is stricter
  • Prop addition limited to prop type with values added manually through an edit mode
• Image upload functionality fills the root App component with the image fixed to the ratio of the component
  • React Native mockup wraps the App component to allow for uploaded image template to overlay the App component
• Switch to toggle to class or functional component fully functional and reflected accurately on code preview
• Switch to a stateful component added and is reflected accurately on code preview using hooks if the target component is functional
• Component names can be edited by double-clicking on the component name and pressing enter to confirm or escape to cancel
  • Clicking away from the focused component exits name edit mode as well
• History navigation implemented as undo and redo menu actions and keyboard shortcuts
• Application Tree now labels the type of the HTML element or React Native component in each node
• Overall design changes

• New tutorial mode integration through the help menu
• The tutorial mode can be exited by completing the tutorial or clicking on the backdrop
  • Modals appear at each step of the tutorial
  • React Native mode implementation
• React Native components can be wireframed onto the canvas
  • Components include View, SafeAreaView, Button, FlatList, Image, Modal, Switch, Text, TextInput, TouchOpacity
  • iPhone X mockup included in the interface for the canvas
  • Switching between modes clears the application state upon confirming through warning popup
  • Components are reflected in the code preview accurately and can be exported as components for any React
  • Native Android or iOS project
• Code preview fully functional and editable
  • Adding components and props are reflected accurately
  • Ace editor integration for editing values
  • Props added no longer crash with certain types and type checking is stricter
  • Prop addition limited to prop type with values added manually through an edit mode
• Image upload functionality fills the root App component with the image fixed to the ratio of the component
  • React Native mockup wraps the App component to allow for uploaded image template to overlay the App component
• Switch to toggle to class or functional component fully functional and reflected accurately on code preview
• Switch to a stateful component added and is reflected accurately on code preview using hooks if the target component is functional
• Component names can be edited by double-clicking on the component name and pressing enter to confirm or escape to cancel
  • Clicking away from the focused component exits name edit mode as well
• History navigation implemented as undo and redo menu actions and keyboard shortcuts
• Application Tree now labels the type of the HTML element or React Native component in each node
• Overall design changes

For now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.