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
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.
@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!
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 = {}
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!
@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!
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!
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!
@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!
@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!
@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!
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! 🚀
@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!
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!
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!
@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!
mern.ai