Subscribe
Sign in
JSX.Design ā The dev friendly no-code editor for React development
JSX.Design is a no-code WYSIWYG editor for React developers, letting you visually build responsive UIs while generating clean JSX code. Drag and drop components, customize styles, and sync code in real-time. Speed up development without losing control!
35
Replies
Best
I LOVE that your landing page you've linked drops the user right into the editor, with landing page content in the view. That's so slick.
I'm using Tailwind for all my styling, do you have any plans to add support for that?
@jonnymiles Thank you! We wanted to create a smooth experience by getting users right into the editor with real content, so Iām glad you liked that! As for Tailwind support, itās something weāre definitely considering for the future. We know how popular Tailwind is, so stay tuned! In the meantime, JSX.design works well with standard CSS or design systems if youāre open to giving it a try.
@hadjimina Thanks! JSX.design does handle responsive design elements, so you can easily create layouts for both desktop and mobile screens. You can adjust components for different breakpoints and optimize them for various screen sizes, including mobile. Give it a try and see how it works for your use case!
I used JSX.Design for a bit and I am quite impressed šš»
I can imagine so many people using it to secure their independence. It remind me of FlutterFlow and the vibrant community they have.
If I am looking to get into coding today, JSX.Design would definitely be the first step on my journey. I see so many people falling into the bubble trap.
This is really powerful, I am just wondering how I can implement JSX.Design in my workflow, especially that I can just pull the code using terminal. š¤
Best of luck šš
@moumen_hamid Thank you so much! š Iām really glad to hear that JSX.design left a strong impression. We definitely aimed to create a tool that empowers developers to streamline their workflow and have more independence. After pulling the code via the CLI, you can simply import the file and use the UI like any component in your project. If you want more details on how it works, you can check out our documentation here: https://docs.jsx.design or feel free to reach out to us at contact@jsx.design. Thanks again for the support and best of luck to you too! š
Launching soon!
This is great, it feels like a website builder for React. How do you track state and effects using the code ? How does it manage Callbacks, Refs, etc. ?
@othman_kabbaj Thanks, Iām glad youāre enjoying it! After pulling the code, you can import the generated file into your UI file and use it in a single line, like this: "< Login UI / >". If you want to access props or refs, like listening to an onClick event for a button, just give the button an elemId (e.g., āsignInBtnā) and pass the prop, like this: < LoginUI signInBtn_onClick = {}
@toniko Great question! You actually donāt need to load a GitHub project directly. Instead, with JSX.design, you can use our CLI command to pull the code into any codebase. The CLI will take care of downloading the converted code and any assets used, making it super easy to integrate into your existing workflow!
This is such a powerful idea, particularly if you can bring designers and PMs along to be able to iterate on their ideas before they get to engineering! š
Best of luck @dameem_shahabaz & team!
@jalcantara Thank you so much! š Thatās exactly the goalāempowering designers and PMs to iterate on their ideas before passing them to engineering. It speeds up the whole process and ensures everyoneās on the same page from the start. Appreciate the support, and best of luck to you as well!
Wow! Very unique, and innovative. Great job, Dameem š
Are you planning on supporting Tailwind?
@davisnz Thank you so much, I really appreciate it! š Tailwind support is definitely something weāre considering. We know how widely itās used, so itās on our radar for future updates. Stay tuned, and thanks again for the kind words!
Iāve been thinking about this exact solution lately. I want the speed of no code while still maintaining the codebase at my own standards. It looks like thatās exactly what this is. Iāll definitely be trying it out
@grant_singleton Thatās awesome to hear! Youāve nailed exactly what weāre going forācombining the speed of no-code with full control over the codebase so it stays up to your standards. Definitely give it a try, and Iād love to hear how it works out for you!
@garysz Great comparison! In some ways, JSX.design does aim to bring the same level of speed and ease to React development that FlutterFlow brings to Flutter. You can build visual elements like styling, layouts, conditional rendering, array mapping, and responsiveness right in the editor. However, things like logic, navigation, state management, and API integration still need to be done via code, giving you full control. Let me know if you have any specific questions!
It's really cool, but it would be even better if the output code supported a globally controllable theme (like colors, fonts, etc.) and component-based code.
@jacksonkasi Thanks so much for the feedback! I completely agree that having globally controllable themes and component-based code is key. JSX.design already supports centralizing design systems, allowing you to control variables like colors, fonts, and more. These can update both the CSS and JSX across your project. Weāre definitely considering even more robust theming features for future updates. Appreciate you bringing this up!
Launching soon!
This looks really great. Congrats on the launch @iamarfas @dameem_shahabaz! Could definitely see it speeding up prototyping without getting in the way of actual development. Will give it a spin on my next project.
@simonas_kauzonas Thank you so much for the support! We're really excited to see how JSX.Design can speed up your development workflow. Definitely let us know how it goes when you try it out on your next projectāwe'd love to hear your feedback!
Also, we'd love to welcome you to our insider program by signing up on JSX.Design, where youāll have the opportunity to work closely with our team and share your feedback on new releases. Insiders also get access to new features early. Feel free to reach out anytime!
@scar_qin Thank you for the kind words! Supporting custom component libraries is definitely part of our roadmap. Our goal is to make JSX.Design flexible enough to integrate with any npm UI library, allowing you to seamlessly incorporate your own design system. At this stage, weāre focusing on community feedback and refining the core functionality, but for now, you can customise popular libraries like Ant Design to build your own design system within JSX.Design. Stay tunedācustom component library integration is coming soon!
Also, we'd love to have you join our insider program by signing up on JSX.Design. You'll get notified of immediate releases and have the opportunity to share feedback while working closely with our team!
Interesting concept, though I'm curious how well it handles more intricate layouts.
@ayesha_mughal1 Thanks! JSX.design is designed to handle a wide range of layouts, from simple to intricate. However, from my experience, no matter how complex the layout, if you break it down into modular components, as React recommends, itās definitely achievable with a clean and maintainable codebase. Feel free to give it a try, and Iād love to hear how it works for your use case!
Amazing tools, it's easy to use for UI/UX Designer, very excited. Thank you
@annisaovn Thank you so much! Iām really glad to hear itās easy to use for UI/UX designersāthatās exactly what we were aiming for. Excited to see what youāll create with it, and feel free to reach out if you need anything!
@leo_m1 I appreciate your feedback! JSX.design is designed to give developers full control over the code it generates, so itās different from traditional no-code tools. You can visually build UIs, but all the logic, state management, and API integration are done via code to ensure flexibility and maintainability. Iād love to hear more about your concerns and see if we can address them!
finally, a no-code editor that doesn't make me wanna tear my hair out! š
@ihuzaifashoukat Love it! š Thatās exactly the experience weāre aiming forāno-code without the frustration. Glad to hear youāre enjoying it! Let us know if you have any questions or feedback!
mern.ai