Subscribe
Sign in
JSX.Design
p/jsx-designThe dev friendly no-code editor for React development
Start new thread
Dameem Shahabaz

JSX.Design - The dev friendly no-code editor for React development

by
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!

Add a comment

Replies

Best
Dameem Shahabaz
Maker
📌
👋 Hey Product Hunt! I’m thrilled to introduce JSX.Design to you all—a tool designed by developers, for developers, that allows you to quickly build React UI components visually, while keeping full control over the code. 🚀 As someone who’s been in the trenches of UI development, I know how tedious and time-consuming it can be to code front-end layouts from scratch. JSX.Design was born out of my own frustrations with existing tools. I wanted a way to speed up the UI building process without sacrificing control over the code or being limited by a WYSIWYG editor’s constraints. And that’s exactly what JSX.Design does! What makes JSX.Design different? • 100% Clean Code: It generates raw JSX without adding any unnecessary dependencies. You can plug the components right into your project, making it perfect for production-level apps. • Seamless Customization: Want to add custom logic or state management? You can create controller files for your components and keep full flexibility. • Real-time Code Updates: Watch your code update in real time while you design. No more switching back and forth between editor and IDE. • Pre-built Component Libraries: Drag and drop components from libraries like ANTD and Material UI, then tweak them however you need—whether through CSS or component APIs. • Supports Typescript, Next.js, CRA, and React-based Projects: No matter which React framework or setup you prefer, JSX.design integrates smoothly into any React project, making it versatile for any workflow. • Design System Friendly: Store your design system variables in one place, and watch them update both at the code and CSS levels, ensuring consistency across your app. Why we built it? We’ve always loved building things fast and efficiently, but the trade-offs with existing WYSIWYG editors made us stick to hand-coding. JSX.Design bridges that gap by giving developers the speed of visual UI building without compromising on control, customization, or code quality. ⚠️ Currently, JSX.design is tested and optimized for Chrome and Edge browsers. For the best experience, we recommend using either of these for now. 🎥 Check out the demo and give it a try! I’d love to hear your thoughts and feedback. We’re launching with an exclusive Insider Program for early users—offering big discounts and a special badge to showcase that you’re part of the founding team! Thanks so much for your support, and I hope JSX.Design makes your development workflow faster and more fun! 👇 Drop any questions in the comments, and I’ll be here to answer them!
Moumen Hamid
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 🍀🚀
Dameem Shahabaz
Maker
@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! 🚀
Jonny Miles
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?
Dameem Shahabaz
Maker
@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.
Scar Qin
JSX.Design seems like a game-changer for React developers who want to speed up their UI building process. I'm curious—does it support custom component libraries as well? It would be awesome to integrate our own design system into the tool!
Dameem Shahabaz
Maker
@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!
Jackson Kasi
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.
Dameem Shahabaz
Maker
@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!
toniko
This seems like a great way to speed up prototyping and wireframing without sacrificing code quality.One question: does it support load existing projects from github or other platforms?
Dameem Shahabaz
Maker
@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!
Davis Nunez
Wow! Very unique, and innovative. Great job, Dameem 👏 Are you planning on supporting Tailwind?
Dameem Shahabaz
Maker
@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!
Simon🍋
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.
Dameem Shahabaz
Maker
@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!
Othman Kabbaj
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. ?
Dameem Shahabaz
Maker
@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 = {}
Grant Singleton
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
Dameem Shahabaz
Maker
@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!
Philipp
Awesome! How do you handle response design elements? Can you also develop mobile screens with it or is it optimized for big screens?
Dameem Shahabaz
Maker
@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!
Ayesha Mughal
Interesting concept, though I'm curious how well it handles more intricate layouts.
Dameem Shahabaz
Maker
@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!
Jorge Alcántara
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!
Dameem Shahabaz
Maker
@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!
Huzaifa Shoukat
finally, a no-code editor that doesn't make me wanna tear my hair out! 🙌
Dameem Shahabaz
Maker
@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!
Gary Sztajnman
Is this the flutterflow of React?
Dameem Shahabaz
Maker
@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!
Gary Sztajnman
@dameem_shahabaz very cool! I think your product has a lot of potential
Leo M
Another useless no-code garbage.
Dameem Shahabaz
Maker
@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!
Bhavish
🤩😀
Annisa Oktaviani
Amazing tools, it's easy to use for UI/UX Designer, very excited. Thank you
Dameem Shahabaz
Maker
@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!