Developers July 1, 2020

REACT DEVELOPERS! Should we give up?

Sae Oh @CruuCrew

My co-founder Marko has spent several months working nights and weekends and his wife’s birthday and their wedding anniversary day and every other day creating an app for React developers.

But so far we have been met with either overwhelming skepticism or, more disturbingly, complete indifference from fellow React developers.

We are wondering if this is a problem we can “pivot” from or if this is a “we should give up” issue here.

We are hoping for feedback from React developers to tell us what to do?

In this post I’d like to:

 1) Explain what we built and 

 2) Summarize the negative feedback we have received

WHAT DID WE BUILD?

We built an interface builder for React called Cruu.

Cruu is composed of:

 1) a Figma®-like “drag and drop” design app and 

 2) a CLI

With our drag and drop design app you can rapidly prototype UI.

With our CLI you can convert these designs into clean React code. But…

... what makes us different, we feel, is our CLI can then take that clean React code and place it DIRECTLY in your React project folder.

Cruu updates code locally when design changes.

All this can be done on a “continuous” basis in the cloud with teams.

Cruu will not break your update process. As your app evolves, you can add features, change UI, change business logic over time and you can continue to use Cruu all along the way.

WHAT WE ARE TRYING TO FIGURE OUT

  1. Is there actually a pain point?

  2. Can we realistically solve this pain point before Cruu runs out of time & money?

In other words, do you think we can get to product/market fit?

SUMMARY OF NEGATIVE FEEDBACK FROM USERS

Indifference

Most disturbingly a friend of mine runs a development agency with 55+ React developers. He basically threatened to fire his developers if no one was willing to beta test our app… And basically these software developers looked at our landing page (www.cruu.io) and were like, “Fine. Fire me.”

As I understand it, if customers express DISLIKE for your product that is a good thing. It means there is a pain point and you’ve excited enough interest for the user to take a look but you need to iterate.

Indifference on the other hand is deadly. It means your product may not address any pain point at all. People just don’t care.

In addition to indifference, users also expressed doubts.

We feel we do have answers for each of these concerns but for brevity sake I’m just listing the concerns by themselves here. If you are interested in our answers please see our FAQ (https://cruu.io/faq).

CATEGORIES OF DOUBT

React developers said…

There is no pain point here.

  • I don’t see the value in drag and drop editors.
  • Hand coding CSS and HTML can be quicker:
    • If I don’t know what I am building, Cruu might help because I can iterate quickly and see what I’m building before going to the trouble of hand coding it. But if I have very specific designs from my UI designer or I know ahead of time exactly what I am building it is quicker for me to hand code it than use Cruu.
    • I’m unfamiliar with WYSIWYG editors.

There is a pain point. But it’s too technically complicated to solve.

  • Cruu claims to be able to do something pretty big. But I don’t trust Cruu has the technical skill to actually do it.
  • When I change my UI design in your drag and drop design app, Cruu can automatically update the CSS and HTML in my React project folder. That sounds dangerous. I’m skeptical that Cruu won’t break my work.
    • Even if I can edit Cruu’s generated code I do not like this as I can only trust the code I’ve written myself.

There is a pain point and you’ve almost solved it.

  • Your product is missing critical features.
    • Cruu lacks component library integrations (e.g., Bootstrap, Semantic, Ant Design, my company’s own design systems, the library of components I’ve written myself over the years for my own work, etc.).
    • With Cruu you can sort of prototype but Cruu is not a fully-developed prototyping app.

There is a pain point and you’ve solved it but I don’t know if Cruu itself will survive.

  • I don’t trust a startup with something vital.
    • If Cruu stops as a company will this break all my apps?
    • It’s another failure case to worry about.

Any feedback, the harsher the better, would be greatly appreciated! Thank you for reading!

  1. 18

    React developer here. What you have built looks cool enough and I think I understand the idea, but asking me to change the workflow I have perfected over years is asking a lot.

    • Adding a new npm package? - sure, that's a small ask

    • try gatsby? - okay bigger ask and higher learning curve, but makes sense after a while, there are benefits.

    • Do WYSIWYG editor? - naw, just --- pass --- I can't. I write code and I need to get my hands in there

    That said I have used website builders, so there are exceptions when I am willing to forgo this. It is at times when I need to do something fast and just get it out there. I do this with some basic websites I make for customers that are looking for low price solution. Fine; if that is what you are willing to pay, I will match accordingly.

    I take great pride in my craft and my code and I have practiced these skills over years (react for years but decades of code in general). When I write a react app for something, it is me putting my best effort forward and years of practice on the table and NGL I honestly look at it like a piece of art.

    The other challenge is that adopting this tool puts you in the middle of everything and makes me depend on you for updates and bug fixes and continued service. This would be huge sign of confidence to commit to at this point and with so little validation.

    So how do I (and perhaps others) ever adopt anything new? There are two pathways:

    • When I am looking to build something new and what I currently know is not sufficient for what I want to build (or the tools I know are crap and there must be something better, for sure?). This is the time when I adopt new tools.

    • I am on social media or similar platform and I continuously, time after time, hear people talk about thing X. Eventually I will look up that thing and try it. (Rust you are on my bucket list okay)

    • (bonus option) I used it at school/work/other context because I was told. I now know it and may use it again later.

    I don't want to offer any advice on what to do, since that would just be an opinion, but I will need to wait to start hearing other people use this and share their positive experiences before I try.

    1. 5

      Maker here... 🤓 Thank you so much for this in-depth comment! This kind of honest and unbiased feedback is immensely helpful. Thank you for detailing how your technology adoption path looks like, I do resonate strongly as a developer with your points above.

    2. 3

      @MF706 They say you should not write in all caps... but ...

      THANK YOU!!!!

      I just followed you and followed all the products you created on Indie Hackers!

      What you wrote about "a piece of art" really resonated with me. I am a developer as well and I feel I know what you mean. I do take pride in my work.

      I am going to parse very carefully what you wrote here because it feels to be 'based on deep experience' and quite insightful.

      I was especially interested in the hurdle test you use to adopt new things which makes a ton of sense but also is a little worrisome for us and our app.

      THANK YOU!!!

  2. 6

    Maybe it’s not react developers but UI designers.

    React developer: make UI without code . Goes against a developer. I am no longer a developer in this case. You are making my job less valuable.

    Vs.

    UI designer: enabling you to create functional UI and export useable code. You are making my job more valuable

    1. 1

      Thank you for this succinct feedback! 😊 Yes, there is value for designers. Our initial hypothesis is that a developer's time is so valuable that if we can provide any tool to help do the boring tasks, the developer will have more time to develop useful and cool functionality on top of the design.

      The designers we have spoken to so far are married to their design tools too much, even to the point where they argue about Figma vs. Adobe XD, so it's proving to be very difficult to make them switch to a new tool 😄

  3. 6

    Hey,

    I think there is a life in that and you shouldn't give up for sure. Few things I would adjust to address concerns and then try again:

    1. If you sell to developers you must assure them that they are in control. Nobody wants to figure out some bugs in your tool under a looming deadline. Show them code you generate and say they can modify as they please.
    2. Integration with existing components is a must. Very few developers create all the components from scratch and if they can't compose components that's a deal-breaker.
    3. I would consider if you should sell this to designers — as they do those things anyway in Figma or other tools, but with this tool, they can get rid of the whole translation level. I would even go further and explore if you can integrate with Figma's components?
    4. For me personally, creating a component tree takes very little time. The main bulk of work is spent on logic/data loading and CSS. Your landing doesn't address any of that. If you don't cover that then the problem you're solving is actually very little and won't be enough to justify adding a whole new tool in the mix.
    5. Some extra features may lure people in. Like accessibility, responsiveness, etc.

    Good luck,
    Sergey

    1. 2

      @sergey_shvets Just to echo my co-founder Marko's comments. THANK YOU for the really insightful feedback and most especially the time it took to try and help a complete stranger out. THANK YOU! I am following you on Indie Hackers now and also following your products as well. THANK YOU!

      1. 2

        Thank you! I'll follow your journey too!

    2. 2

      Hey this is Marko, the maker... 🤓 Thank you for your thoughtful comments.

      1. You are absolutely right about being in control. Thank you for the suggestions on how to solve that.
      2. Integration with existing components is again a spot-on insight, and is actually something we've discovered a lot of developers want (ourselves included). Currently it's in the works.
      3. Designers are a tough crowd. Seems like the design tools currently around like Figma and Sketch have optimized so much for designer productivity, and designers have gotten so used to their quirks, that trying to sell a tool that is slightly different in design aspects, but offers vastly superior hand-off, is just of no interest to them.
      4. Yes, Cruu is first and foremost meant to replace boring CSS coding. I don't think there will ever be a tool that help with implementing business logic "visually". Maybe some limited niche solutions, but not a general one. I definitely understand what you mean about the landing page. We should put more emphasis on how Cruu helps you not have to write boring CSS.
      5. Responsiveness is included, states like hover, active, etc. as well. Accessibility is planned.

      Thank you so much for this wonderful feedback again, please let us know if we can ever be of help to you!

      1. 2

        Have you and @CruuCrew used Framer (https://framer.com)? I wrote another comment here but it basically seems like what you're building, it's a design tool like Figma that uses React under the hood and can export to React.

        1. 1

          Yep, responded to the other comment, thank you so much! 😊It's a bit difficult to follow on IH, since it keeps reordering comments.

      2. 1

        I wouldn't say that it will be slightly different for designers. As they'll get the exact same results as they designed. There will be no developer in between to ruin their pixels. And another problem of that matter, many designers don't think about different states they have to design for: empty, loading, etc. Your tool might help them think about those states before handing it over to developers. Anyways, it is just my thought and it really is a pivot compare to your current positioning.

        1. 1

          Thank you for providing so much detail. This is incredible! 😊Yep, there are clear benefits to having the design translated into pixel-perfect code for everyone on the team.

          When you read some of the blog posts on a hot topic like design systems, and when you just look at the keywords: systems, components, overrides, instances. Those are basically engineering terms. Designers are starting to think more and more like engineers that's for sure.

          But the designers we spoke to, love their current tools too much, and are reluctant to switch easily. Not even between different design tools. 😄

          1. 2

            Oh yeah, I was fighting with my design team for 6 months to get them out of Photoshop to Figma... We humans are creatures of habit and are extremely lazy :)

  4. 5

    Background: Web dev veteran (8+ years) and React freelancer.

    Here's my thoughts:

    • I have used many D&D / WYSIWYG Editors and Wireframing tools in the past, both professionally and personally (Webflow, Figma, Adobe XD, Dreamweaver... way back) but always end up writing the code by hand using CSS frameworks (Foundation and Tailwind for the most part) and other CSS tools. I think once you're somewhat fluent in using these tools is faster and much more comfortable (e.g. setting a global variable for your accent color and then being able to switch the entire site with one line of code)
    • These tools never work 100%, especially not in bigger project. There is ALWAYS this one (or sometimes more than one) component that looks sketchy on a specific breakpoint.
    • Most of these tools write terrible, bloated, garbage code --> this is the one point you're app does a lot better. Exports look pretty clean and maintainable so far

    Here's where you could do better:

    • FORMS! The single biggest pain point in React is making and managing Forms by hand. I can't say how much time I have wasted on making usable, easily validated but still beautiful Forms in React. Most React-Devs will use a library like Formik or R-Final Form, so integrating these is a MUST imo
    • Let me be 100% honest and 0% mean: the usability of your app is bad. It took me a full two minutes how to figure out how to align items, still dont know how to make a half way decent layout after playing around for bout 10 minutes. If this is supposed to be "drag and drop" DONT lock in my items and let me drag them to where i want them to be visually, for gods sake :-D
    • Guided tour would've been nice. I say you're aiming at amateur developers, not professionals. Professionals will always take the higher road and do everything themselves. For someone who learns React but dosent bother with CSS, this might be the right product.

    Bonus: Make it possible to drop my items anywhere, maybe make them "dock" to layouts or grid boxes and let that still be responsive. This "everything is align: center" I can make in a single line of CSS

    1. 1

      Incredibly useful feedback, thank you so much! 🤓Yeah the usability of the app is not polished, it's something we definitely need to improve. Thank you for sharing the insight about forms, we will look into that more closely. Maybe there is a way to do it in an intuitive way visually.

      Thank you so much for providing information on how you used other builders in the past, and for going as far as testing how to generated code works. Have you figured out that in the design app you can save a color, and then have it be generated as a constant in the code? We currently have support for shadow styles and colors like this, since everything else can be encapsulated in a component.

      I followed your product Jamfony - being an amateur guitar player myself, it sounds cool, would like to see where you take it! 😊 Please let me know if there is a way I can be of help to you!

      1. 1

        Thank you, Marko. I will :-)

        Have you figured out that in the design app you can save a color, and then have it be generated as a constant in the code? We currently have support for shadow styles and colors like this, since everything else can be encapsulated in a component.

        I have not. I think a guided tour would be great for new users. Something like this: https://github.com/gilbarbara/react-joyride

        1. 1

          Thanks for the feedback! Yeah this is something we plan to do, seems like it would help a lot 🤓

    2. 1

      I have used many D&D / WYSIWYG Editors and Wireframing tools in the past, both professionally and personally (Webflow, Figma, Adobe XD, Dreamweaver... way back) but always end up writing the code by hand using CSS frameworks (Foundation and Tailwind for the most part) and other CSS tools. I think once you're somewhat fluent in using these tools is faster and much more comfortable (e.g. setting a global variable for your accent color and then being able to switch the entire site with one line of code)

      What if the tool would let you edit your code at any time though? E.g. you start off building something with drag-and-drop, write some custom code, and then switch back to WYSIWYG mode?

      1. 1

        That was the premise of Dreamweaver. I'd be down to use that, as long as the integrated editor was at least as good as VSCode.

  5. 3

    Relatively new to JavaScript and React here

    I'm glad I didn't discover Cruu when I started learning React because I think it could have created a work-flow dependency if I hadn't invested hundreds of hours hand-coding components.

    If I'm correct about that dependency concept, you might want to consider targeting JavaScript beginners who want to learn React so that they become 'addicted' to Cruu, and overtime you'd build a core group of passionate users.

    To do it successfully though, I think this would require a real push in the educational direction, meaning YouTube videos and courses on sites like Udemy where you actually build out simple apps from scratch to deployment using Cruu as one of the tools.

    I don't think this approach would work if you only teach them how to use Cruu. I myself would have needed to see the big-picture workflow of building deployed apps.

    1. 2

      First of all thank you so much for providing this insight! 🤓 Your idea about targeting junior devs is actually quite unique, we certainly didn't think about it that way. We always tried to impress the experts. But they are a tough crowd 😄

      Additionally you are spot-on about the educational direction! We are working on a couple of tutorials, where we build apps from scratch and use Cruu as one of many tools required to actually deliver a finished product.

      Thank you so much for taking the time to explain how you view the product and where you are in the developer's journey. If there is any way we can be of help to you, please let us know! 😊

  6. 3

    I would target UI/UX designers not React Devs. They would benefit the most from a WYSIWYG app. FYI - I'm not a React Developer :)

    1. 1

      Hi @pixelpunk! I apologize for the tardy reply to your comment! I LOVE Indie Hackers and I am very grateful for this awesome community! The issue though is there is no option to sort comments by "Most Recent" so this comment slipped through the cracks. Thank you for the suggestion to target UI/UX designers! As cheesy as this may be, to try and say thank you, I have followed you and upvoted! THANK YOU! @pavlomarko

  7. 3

    I think this is awesome. Your product has a market fit, but not for developers. Especially React developers. React is a low-level view utility that appeals to devs because there is a low barrier to entry - abstraction of any kind won't be adopted easily.

    That said - your utility would most certainly fit marketers, founders, etc... Basically its a "low-code" solution - similar to Expo for React Native.

    Build what you want. Focus on the people who actually need it.

    Every product ever made has had its level of skepticism. Just keep moving forward.

    1. 1

      Wow, thank you so much for this wise feedback. 😊 Yes, developers love to code and designers love to draw, probably too much to stop doing that for the sake of some practicality.

      We have considered the "low-code" space, but personally as a developer myself I become skeptical of tools that claim to implement business logic with drag & drop, knowing how difficult it is to make a general tool for that. The irony of life. 😄

      Thank you for the encouragement, please let us know if we can be of help to you in any way now or in the future!

  8. 3

    I use Framer which does basically what you're talk about. It's a Figma-like WYSIWYG design editor that generates React code. You can even put in code inside the WYSIWYG editor, to make buttons click able and increment a counter for example, ready powerful stuff. They also have a lot of component packs and other plugins.

    I am also a React developer, and while I don't always use Framer's generated code, it sure helps speed things up.

    I think you can go down this route, but check out who you're competing with, and more importantly, who your target audience actually is. You seem to want to make a design tool for non-designers (developers, basically), and they don't want that because, well, they're not designers.

    1. 1

      Hey thank you so much for the feedback. Yes exactly, framer is a fantastic tool! We wanted to create something similar, but more developer friendly. Less copy-pasting, more continuous design updates, and a project structure that mimics the structure in the code, so that it's easy to follow one and the other.

      Again thank you so much for taking the time to explain how you view the current landscape! You mention you use Framer, but you are also a React developer. What percentage of the Framer generated code constitutes your final production code?

      Thank you so much!

  9. 3

    This is interesting and I feel like there might be something here, but you haven't quite nailed it yet.

    I'm doubtful about your ability to sell to developers. Developers write code, but you're basically asking them to become designers. I don't see most developers giving up their current workflow to switch to this.

    Where this could be useful is for teams - specifically to improve collaboration between designers and developers. I could see a designer using this (or ideally, the design tool they're already using, like Figma) and converting their design directly into code.

    Anyway, that's just some food for thought. If you haven't already spoken to some designers I would definitely give that a go.

    1. 1

      Maker here... 😊 Thank you so much for the feedback! This is very much appreciated. Yes, the idea for improving team collaboration is where we based the concept for the product.

      The problem we are facing now is that for the team to adopt, there must be a champion in the team, who will push others to try. However, on the individual level both designers and developers seem to be married to their own tools too much.

      This is why we thought we should try and make at least the developer happy with the product, but it's not turning out to be easy as of yet.

      1. 2

        I think Richard is correct, this tool will be easiest to sell to designers (or people who do both design and development).

        I think you are on the right track by streamlining the integration between UI designs and implementation, but it will be tough to have developers learn design skills with your tool (you'd have to convince them that these are skills that will be valuable to them long term). Designers on the other hand, spend most of their time with editors like Figma and your tool, so your product can be an enhancement to their current workflow - super low friction!

        A huge pain point at my current company is that devs on my team don't have Figma access, so they don't get CSS colors and font stylings. There is a bit of a disconnect right now, and I could see a tool like yours helping smooth that transition.

        Best of luck! Really cool tool.

        1. 1

          Thank you for sharing a pain point you are facing today, and for supporting us on our journey with your feedback! 😊I've followed your project Mobo Games, looks pretty cool. I have some friends who are into board games quite a lot, I'll make some recommendations! Please let me know if I can be helpful otherwise!

  10. 3

    As I understand it, if customers express DISLIKE for your product that is a good thing.

    Not really :)

    It means there is a pain point and you’ve excited enough interest for the user to take a look but you need to iterate.

    Did your product by itself really excite the interest?

    That honest feedback from the devs who tried your product is really really good. You're holding the scroll of truth there.

    In order to have any chance of success, you must have an overwhelming obvious positive counter to every one of those concerns.

    My co-founder Marko has spent several months working nights and weekends and his wife’s birthday and their wedding anniversary day and every other day creating an app for React developers.

    If that's true, I'm sorry.

    1. 1

      Marko here 👋 Thank you so much for the insightful feedback!

      I totally agree that we need to be able to answer the concerns in an overwhelmingly positive way. What's proving to be a bit hard is that

      • developers usually come pre-framed that any UI builder is terrible
      • the concerns are addressed in a positive way, but to really understand how, you need to dive into the details. However, because people are pre-framed that this kind of tool by definition must be bad, rarely anyone has the appetite to dive deep, and invest the time to understand.

      Your tool on the other hand, PeachyPlan is really great in the way that it's easy to communicate what it does, and it doesn't rely on deep technical analysis to reach a conclusion. Well done on the execution, if I may, the website and the timeline looks really sweet! 👏

      To try and provide value to you: at my day-job, we use Google Sheets for this kind of planning, and it looks terrible. On a weekly basis though, planning is done in a one-pager format, where tasks are listed and the main responsible people are listed next to the tasks. One interesting thing is that the one-pager mentioned is actually a one gigantic document in confluence, which only gets appended to. So in a way it forms a timeline.

      I guess the PMs use this document to provide an audit trail to senior management on what is actually being done on a week-by-week basis. Maybe this is some interesting food for thought to you.

      Anyhow, thank you so much!

      1. 3

        Thank you for the kind words :)

        To try and provide value to you: at my day-job, we use Google Sheets for this kind of planning, and it looks terrible.

        You are not the only one!

        On a weekly basis though, planning is done in a one-pager format, where tasks are listed and the main responsible people are listed next to the tasks.

        A weekly summary view...
        That's a brilliant idea. Now on our feature list :)

        developers usually come pre-framed that any UI builder is terrible

        Yeah they do!

        I think devs approach UI in two modes:

        • Copy/paste mindset, where you want to copy working code, and make as near to zero changes as possible. A tool that makes changes easier is not quite the same thing. Philosophically, this mindset is focused on risk avoidance and minimal mental burden.

        • Build-from-scratch mindset, where you are making something new and weird, and it will take special crafting. The default assumption is any intervening layer makes the crafting more tricky.

        1. 1

          Glad to be of help to my fellow indie hackers! 😊If you'd like to schedule a call, I can give some more details about how we currently operate, to help you flush out that feature even further.

          What you wrote about developers sounds very accurate 🤓

  11. 2

    I might repeat things said but:

    • "similar to Figma" - Figma is marketed for designers not coders.
    • I think developers might be on a bigger "early adopters curve" than others for various reasons. (meaning there are less early adopters to be found around and they are hard to impress.... just so much stuff out there and the job is so busy already...)
    • The most expensive thing for a developer in a way is to go and learn just another thing, that's in the highest demand.... so saving "some work time" might be low on the priority.
    • I've done that mistake before on building something just to be more efficient and people didn't care enough, the package of efficiency is often more complex than we precise initially. (honestly hoping I'm not making that same mistake with my current project all over again)
    • That landing page/site isn't marketed to developers, it doesn't even have a doc section... The code generated, what is it most similar to? how is it organised? how do I use it efficiently without breaking the editor?... code samples, tutorials.... sample productions...
    • You might want to think of the persona your marketing to... possibly newer developers would be more inclined to try it out... or refocus on designers with hand-holding to have something actually running (no-code movement thing)
    • Other generator tools I used before, to assure they would survive for a while to be useful had an open source component, so even if the venture was dead, somethings would have survived, so one could still have their past investment not go to 0, but still be useful. (IIRC the UI generator created a config file, and the CLI that goes from that config to full code was open source...).
    • There are many other react component generators from GUI I believe, what makes this one different?

    BTW I try such tools cause I'm not a front end developer, mostly a back-end and such, so maybe that should be another persona focus, so I only do front end for my own projects, and I try to put the minimum effort cause it's not my thing / don't like it / don't have much experience / no established work process...

    1. 1

      Hi @hatkyinc! Wow! I just want to say how grateful I am for the thought that went into this but more importantly for how insightful it was and how helpful it is for our thinking. I am cc:ing my co-founder @pavlomarko to make sure he sees your comment as well.

      What you wrote touched exactly on what we are wondering about. Especially what you wrote about open-source, perhaps Cruu might appeal to newer developers, our landing page issues, etc... THANK YOU!

      I am following you and upvoting now! I just wanted to very sincerely say thank you again.

  12. 2

    FYI, Plasmic was published just few days ago and is very similar to what you're doing https://medium.com/plasmic-app/announcing-plasmic-3bc510a97ea3. Looking into it might help you get ideas on what is special about your product (how it differs).

    1. 1

      @ApKoponen Thank you! We are very grateful for this! I hope you are having a great day! @pavlomarko

  13. 2

    I mostly agree with what was said, I have been a developer for over 25 years, and I have seen a lot of tools come and go over the years, I mean even Word took a shot at that, but in the end it was all the same set of problems, final code is too big, or too complicated, it overwrites what I did, or its missing that one feature that would win it all, or even well the company is now gone, so I have to find something else to work now.
    But on of the key issues is always changing the way I do things, that one is the one that will hurt the most, I think there are programmers that wont change the language they work for exactly that, they will stick with what they know, and if you think of it, its a fair thought, every time you introduce change you reduce productivity, and that may last a while depending on the complexity of what you have to learn, or assumptions that were done in order to optimize the work in the future.
    So my suggestion would be to not try to totally reinvent, as you mentioned the key is on the CLI, so focus on that, and if you truly want to do a UI, do it, but also add to well known one like VS Code, VS, etc, start getting your people there, and boost there performance by integrating your CLI into their process, create accompanying macros that pair up with the existing tooling, right click function for those whole are more of a mouse person, etc, after they grow into your way of simplifying, then they might migrate to the full tool set because they now know exactly what they are gaining.
    But dont get me wrong, I understand why you would like people to use your UI, its probably going to have full power, specially because you control the whole environment, you should let them figure that out, and grow into your tool.

    Dont give up, you have the right idea, just the approach that might be a little out of the common path.

    <KeepCoding/>

    1. 1

      Hello @oakcool! I am tagging my co-founder @pavlomarko so he can see your post too!

      I did not know Word tried this! You have given me a lot to think about especially what you wrote about "every time you introduce change you reduce productivity."

      I also am intrigued by what you wrote about right-clicking and starting small, integrating into their current process (e.g., VS Code, etc.) and maybe if we do something small well for users they will trust us to use our full tool set.

      THANK YOU!

      As cheesy as this may be I am following you and upvoting just to attempt to say thank you! THANK YOU!

  14. 2

    You can learn something from Wordpress theme builder website how to market your builder.

    You need a link for sites built with your tool. Be able to import one of those templates and customize it from there.

    1. 1

      @devgk Thank you! Templates are a great idea and we have been also thinking about this route as well. Thank you for taking time out of your day to help a complete stranger! I am following you and upvoting!

      I am cc:ing @pavlomarko

  15. 2

    I am a developer and here is my take on this.

    No-code tools are probably best for people with no coding experience or those who don't want to spend time coding things. Selling no-code to a developer will be difficult. I am a developer and I like complete ownership over my code, my design, architecture etc. I love to code and build things.

    For instance, I used bootstrap when I started programming as I had little experience with CSS. Once I gained enough experience, I stopped using it completely and now my CSS files are smaller and I have control over things.

    Selling this to non-developers will be much easier. This is my opinion.🤷🏼‍♀️

    1. 1

      Hi @kalesh13! It is interesting what you write about using Bootstrap AT FIRST but once you gained enough experience you stopped and your files got smaller. @pavlomarko and I are very grateful for the honest feedback and taking time out of your day to help us. Thank you! I am following you and upvoting you just to try and say thank you!

  16. 2

    I'm a full-stack developer and work as a technical director in a company of ~300 devs and ~100 designers, and have worked in multi-disciplinary (business, dev, design) software teams. Here are my 2 cents.

    Developers might not be the right market for this kind of a low code tool. Three reasons:

    1. Developers don't often really care what makes them most productive overall. Developers love to code, it gives them pleasure and a sense of accomplishment. So they are interested in productivity tools that make them feel productive while coding, not in tools that force them to spend time doing something else.
    2. As you also stated, developers hate lock-in and are often very risk-averse. The fear of your tool at some point in development failing them is a huge barrier. This is one of the reasons developers often end up "reinventing the wheel". Developers want to feel that they are in control.
    3. Your tool is replacing some of the work that is the developer's job and part of their craft. This is a very high psychological barrier that most developers have a very hard time overcoming. Even if you could prove that your tool would cut their development time down 50%, they are very unlikely to believe it.

    I think the two underlying megatrends that your product is tapping into are:

    1. Low-code/No-code
    2. Design systems

    These two trends give you at least two valid target groups:

    1. Business people (Boostrappers/Indie-hackers/SaaS-founders)
    2. Designers

    Is there some pivot that could give either of these groups value?

    Here's one idea:

    Could your tool be branded as the "UI for your design system"? Here the value proposition is that it allows the designers to be in control of the design and continually update it by themselves. This kind of an "easier handoff" process might be something people are already looking for.

    All the best and good luck 👍

    1. 1

      Hi @ApKoponen! @pavlomarko and I are very grateful to you for your really thoughtful and insightful response. I am very grateful to you for taking time out of your day to help a complete stranger. I was especially grateful to read your post when I saw that you work as a technical director with hundreds of developers and designers. This is the EXACT world we are trying to figure out.

      You have given me and Marko a lot to think about. Especially what you wrote about "replacing some of the work that is the developer's job and part of their craft" and "developers don't often really care what makes them most productive overall. Developers love to code, it gives them pleasure and a sense of accomplishment."

      Hmm.

      Well, as cheesy as it may be, to try and say thank you I am following you and upvoting! Thank you!

  17. 2

    I have not opened the page but every time I see a builder like this (code generator thing) I think: can it read code back?

    If not it’s useless. No point learning a tool for an initial generator or code I can’t change cos it breaks the generator.

    I’m imagining the generator works for most things but there’s always something that’ll miss. Easy to fix with code in my side. But if that change prevents me from using the generator again, then, well, it’s useless or at least I see it that way.

    I’ll open your page now as I’m curious but wanted to give you a dump of the raw skepticism likely floating in every dev’s head.

    1. 1

      Thank you for taking the time to share how you view this whole space. This is very much appreciated 😊

      The idea with Cruu is that you don't have to edit the generated code to make adjustments. Instead every customization can be done through passing props from the outside. For instance, you can take a component, and replace any of its children with your custom code, without having to edit the source. Same with styles or anything really.

      Here's how it's explained in the docs: https://docs.cruu.io/code/overrides-system

      If you ever get the chance, please take a look and let us know if this makes sense.

      Thank you so much, I had followed you on IH! If there is any other way I can be of help to you, please let me know 🤓

  18. 2

    I think this is really cool but also a very hard problem to tackle.

    So, I was doing a design in Figma the other day just for fun ( a dark mode version of stackoverflow https://pbs.twimg.com/media/EMRHAk8WkAACPuL?format=jpg&name=4096x4096 -better than what they came up with if you ask me :P- ) and after finishing I thought, "woah, I wonder how hard would it be to make this in HTML/CSS?" (I didn't even try.. ok I tried for 20 mins, disclaimer, I'm not a frontend developer and I'm still learning react)

    And then I thought: Why can Figma just give me to code and we're done.

    So, I think what you're doing is awesome, but also I think it's very hard to achieve (not saying you shouldn't) and here's why.

    If you are a Ract expert, you'll find your way faster with the editor. If you're a design expert you'll find your way with your full featured tool. But if you're in between like me... you won't be to do much with this tool because it wont be as flexible as a design tool nor as powerful as the editor.

    Here's my poor attempt to create add a circle and text in both figma and cruu

    I know I have to add more rows and columns to make it work, but then the "drag and drop" promise is gone. I'm aware the tool is still growing though (yet I had a similar problem with webflow)

    Keep the good work!!

    TL;DR: The tool falls right in between two expert modes, and that's a gap very hard to close.

    1. 1

      Wow, thank you so much for this detailed feedback, and for posting a screenshot of your progress! 😊

      If you are learning React or front end, I'd be happy to help you out with that! Let me know we can setup a call and I can try to help you with things you are working on 😊Also, would you like me to recreate your design in Cruu for you just for fun?

      The tool falls right in between two expert modes, and that's a gap very hard to close.

      Very true, each expert pulls in their own direction, and it's quite difficult to make those ends meet.

      I personally don't believe that "drag & drop" is the main benefit of something like Cruu. The mechanism of dragging and dropping is forever going to be not precise enough for actual work.

      The point of something like Cruu is that when you are designing, you can see and share what the design is going to look like (like you are doing now) without having to setup an environment and write code that you might throw away.

      Not every company finds product market fit immediately, so copying from specs is not something you can always do as a developer, because you don't have the spec, and you don't know what the customer will like. You are mostly experimenting. So for this experimentation phase visual builders are much more valuable than writing code.

      The reason is, in my view, when you are writing code, you focus too much on the architecture, how you are going to break it up into components, how state management is going to work, etc. that you stop focusing on the end user and what their experience is going to look like. Soon enough you find your self setting up prettier, and doing low-value tasks like that in the beginning.

      Whereas with something like Cruu, you first focus on the customer, then you focus on the code. And only on the important bits of the code - doing business logic, not mindless CSS coding.

      At least this is how I view Cruu, but developers and designers seem to focus on the technicalities of it, which completely a legitimate point of view as well, and we are trying to soak in as much of that as we can 🤓

      I followed you on IH and your product NxMatch. Although I am not a huge sports follower, I signed up, to get some of your emails, maybe I can be useful and provide feedback. If there is any way I can be helpful to you, please let me know 😊

      1. 1

        Ha awm.. you didn't have to. Thanks.

        Yeah, I can see this post received a lot of responses, I think you guys are into something important here.

        I took a few minutes to review the documentation and while it was comprehensive I still couldn't make that simple thing. I did it in a few minutes in code pen though.

        What helped me was that video in the landing page, I was able to pause it and see what were you doing and I was like "Ah ... padding.. of course" and so on.

        About my project, well it's still very far from being made, but hey maybe I can use cruu to build it.

  19. 2

    For the way I work, this would not solve a pain point. I generally have two approaches for frontend development. Either 1) prototyping with Bootstrap or Tailwind and largely re-using stock HTML/CSS components with minimal need to fine tune the layout beyond what I already get live in the browser, or 2) implementing a design that was already created by a designer in a tool like Figma. I wouldn't use another WYSIWYG tool in either of those cases. So for me, it doesn't solve a problem.

    Kudos for having enough awareness to start asking the hard questions though. Better to arrive at the answer now instead of later.

    1. 1

      Thank you for such candid and concise feedback, and for sharing how you personally solve the problem! 😊 This is exactly the kind of feedback we were hoping for to validate / invalidate this idea 🤓

      Please let me know if there is a way we can be of any help to you!

  20. 2

    Hey, SaeOh,

    Your idea is amazing and I would really want to understand your 3-year goals from now. I have a few ideas we can brainstorm on and see if those help you in any way. I personally feel a little pivot in the idea can surely do wonders.

    Also, I know there are some companies out there building plugins for XD to convert a design in CSS and HTML or in to react. So do keep looking for them.

    I would love to discuss more of your product. Hit me up on [email protected] or add me on discord: Sha101#1831. My Linkedin: https://www.linkedin.com/in/shalin-doshi-839793119/

    1. 1

      This is Marko, the cofounder of Cruu. 👋 Thank you very much for your feedback and for pointing out that there are interesting plugins to look out for. 🤓

      Since SaeOh is on a different timezone, I'll take the liberty of offering the calendly link: https://calendly.com/cruu/30min if you would like to get in touch with the team.

      Currently I don't have a Discord account, but I added you on LinkedIn, hope to get in touch with you! 😊

      Thank you!

  21. 2

    I've developed with React for 4 years now. The other comments have given a lot of great feedback on your tool so I won't just repeat those.

    The biggest problem I see here is that you've built a tool for the interaction between designers and developers but are trying to market directly to developers. Something that I've found as a developer is that even with drag'n'drop design tools like Adobe XD and figma is that I simply don't have the design skills to make something that looks great. Most developers nowadays are writing code to make things work with data.

    In the workflows I've been a part of, designers design things in some design app, then either send over those files or export it to Zeplin which provides CSS values. I haven't used Framer but I'm sure it does something similar. Our job was then to translate that into robust code that those tools couldn't. Hook the views up to data, implement media queries, make it all interactive. The step of writing the HTML + CSS was a chore but not super painful.

    I think your road to product/market fit is creating a tool that designers love to use to design, and product managers love because their developers build new designs faster. Developers are just part of the equation, and in my experience, don't have a lot of say in the workflow.

    You could achieve this by getting designers to use your tool. Or by building plugins to the existing design apps that can export the React code developers want.

    1. 2

      Thank you so much for the honest feedback and advice! 😊You are on point that developers don't have the skills to create beautiful design. On the other hand, we've found that designers are also a tough crowd, as they are very used to some quirks of the popular design apps, that it's difficult to switch for them even between design apps.

      I had followed you and your product Polished! Please let me know if there is a way I can be of help to you! 😊

      1. 1

        For sure! Yeah, it's tough all around. There are incumbents everywhere. I think it's incredibly important to know what the key value you provide is and market the hell out of that.

        I followed you back as well :)

        Want to exchange beta tests sometime in the future? Polished is available but not exactly ready for use. I'm happy to do a screencast of me testing out your product and send it to you.

        1. 2

          Thank you, it's great to connect! Absolutely, I've actually already downloaded Polished and would be happy to record my feedback for you, if you'd like 🤓

          1. 1

            Sure go for it! I will let you discover the major stumbling blocks and see what you think :)

  22. 2

    React Dev here who works for a mid-size SaaS company.

    I like the idea, and if it really worked, we would use it.

    The problem it would solve for us is keeping our combining our UI library in Figma with our component library in our codebase. This could be a massive win for us, as keeping both in sync is a nightmare.

    I do think you are trying to tackle a very difficult problem for two reasons:

    1. There are a lot of different variations in tech stack for styling - plain CSS, SASS, styled components, tailwind to name but a few. That said, if something like this worked really well, I would be happy to go with whatever option was used (as long as it was sensible)
    2. You're editor had to be good. At least almost as good as Figma. Designers like what they like.

    That said, I think the future is in a merge between the two worlds. With this working efficiently, we could save so much time.

    1. 1

      Thank you for giving your honest feedback! 😊 Yes, it's proving to be quite difficult to solve haha 😄We feel the same that the future is in the merger of the 2 worlds, where tools provide seamless workflows.

      Thank you so much for the feedback. Is there a way I can be of help to you?

  23. 2
    1. Copying the entirety of functionality of Figma/Skecth/XD just to solve an issue that's RELATED to it, but not the same, seems like a huge waste of time for you and people adjusting to learning yet another thing is a no-go.

    I can see you being a bridge between design tools and code, a third-party that people within their design tool can opt-in to use if they find a value in it. Yes, as a Figma plugin etc.

    1. However, I am still unsure who would use this.

    Designed (in-house or outsourced) creates proposals, somebody approves them, then devs do their thing. Designers aren't interested in something like this for sure, so it's definitely for devs.

    A developer will go on a project and load a bunch of your components with generated code, but how does that fit into the existing code? Is the CSS paradigm the same, the libraries, the way they are used (hooks, classes, proptypes), is it TS or plain JS..? Each mismatch leads to more accumulated frustration and need to actually fix it, instead of use it as it was generated....unless you account for all of those version - which I cannot fathom that you ever could. There's also need to design the same component in all the states that it can visually go to (for example: invalid form field, pending validation, success etc), so all of those need to be captured somehow as well.

    Components' complexity lies in state transitions and logic, and not in style.

    For me, I currently don't even consider trying the product because I think it can't possible provide enough value for the price of learning and later time adjustment that need to be done.

    1. 2

      Hvala puno na savetu! 😊Always amazing to stumble upon a fellow Serbian hacker!

      Yeah, in your comment you create a very useful framework for evaluating ideas: is the value disproportionately larger than the learning curve. Most people get hung up on the price aspect, or the breadth of features, but the learning curve is something Cruu is actually struggling with right now.

      Components' complexity lies in state transitions and logic, and not in style.

      Completely agree on this one!

      Thank you so much for the great feedback! Let's keep connected! 😊

  24. 2

    The landing page looks really bland and resembles windows 98.

    Many Front end designers today have a higher bar for the aesthetics. If a design tool can't even impress a developer above the fold, all the problems you mentioned will happen.

    Even when Figma became pretty successful I still had huge doubts on them. Doubt is human nature. In my mind, my thought is "oh at best, it'd be one of those products that promises a lot but the end result you can create is so limited" - I feel like that even about webflow sometime, and they are pretty powerful.

    Developers have trained them to break down visual ui into code and maximize code-reuse. To switch from keyboard and using trackpad doesn't really help them.

    Half of iOS developers hated XCode UI builder.

    But don't let your code go to waste. I am sure there is a use case and target group that can benefit from this. Maybe turn it into a plugin to export figma designs into react components. It's best to piggyback on existing platforms, get big, then figure out how to be big yourself.

    1. 1

      Thank you for the honest feedback and thank you for sharing how you personally view this type of product! 🤓 Agreed on the landing page, haha windows 98... 😊 You are absolutely right, turns out many developers are very skeptical of this type of product.

      A lot of people are suggesting building a plugin for Figma, perhaps this is the way to go!

      It's best to piggyback on existing platforms, get big, then figure out how to be big yourself.

      Great advice!

      Btw, your Goals app looks amazing! I'm following now, please let me know if there is a way I can be of help to you.

      Thank you!

  25. 2

    It's an interesting dilemna. You're not quite a figma/webflow that would appeal to designers/nocoders (or not enough). And you're not quite the preferred toolkit for developers.
    Still - there is a gap between those two groups and similar to the comment about using it more of a bridge between them might be a good play.
    Your value prop could be that designers can build a UI which is almost production ready React code and then a developer can come in and do more customization.

    1. 1

      Thank you so much for providing great insight! 😊 Yeah, probably the reason we made such an in-between product is that we are a small team and we both wear all the hats, so the product is kind of the blend of our roles.

  26. 2

    There's some great discussion here.
    You've basically built webflow-for-react-components. Very cool.

    Here's an off-the-wall idea that might be worth exploring:
    How much work would it take to pivot to a Wordpress Gutenberg custom-block builder?
    It strikes me that much of what you've done might be repurposed and two powerful trends in the wordpress world are: (a) webflow-like page builders (Elementor, etc) and (b) adoption of the native Gutenberg block editor (blocks are essentially pre-rendered react components). So far, there aren't many solutions that bridge those two trends, and in my experience, custom-block-building isn't too friendly yet.

    Maybe it's a crazy idea, but the Wordpress-solutions market might be many, many times larger than the visual-tools-for-react-developers market, and as many have pointed out above, coders by nature don't usually warm to drag-and-drop visual-design tools. On the other hand, the Wordpress market loves low-code and no-code solutions.

    1. 1

      Thank you so much for providing this unique and thoughtful comment! 😊Since we are not Wordpress developers, we weren't really aware of this possibility. It's great insight that the the wordpress market would appreciate a low-code no-code solution, whereas the developers would not. Definitely worth exploring!

      Thank you so much, and please let us know if we can be of any help to you? 🤓

  27. 2

    I could see myself using this for prototypes or MVPs to knock something up quickly, but I think the problem lies with your audience, who are they?

    It seems you're building a no-code app for coders? Or a design app that's not Figma that outputs React - but as a designer I wouldn't be interested in that. It's like the value is stuck somewhere between the designer and the developer.

    I design a little and I'm a front end dev, so I can see that value. I could design something and then be kickstarted on the React as well. And I could ask my designer mates to use it if we were working on something together - but would designers in larger agencies or companies move over to you from Figma or Sketch? Unlikely unless you offer all they have to offer in terms of plugins and collaboration.

    If this is a working product then that is quite an achievement, well done. What tech stack does it use?

    The problem perhaps is that the number of people that do both design and development (especially React) might be quite rare, usually you're one or the other (not always of course, but the majority I would assume). For example, my designer mates know HTML and CSS, but not JavaScript or React. And until you have something that rivals Sketch or Figma in functionality and popularity, I can't see designers making the move to your product.

    Really nicely done though, perhaps it can be retargeted more for the indie hacker designer/developer duo that want to create a quick MVP? I can see myself using it that way.

    1. 2

      The tech stack Cruu uses is the following:

      • Firebase for backend and hosting
      • React for the dashboard projects view (all generated code by Cruu)
      • React and Next.js for the marketing website (generated code)
      • Mithril.js for the actual designer

      I opted for Mithril, because it's smaller and faster than React, and I really needed all the performance I can get. Plus the state management is much easier in Mithril. I feel like writing something like Cruu using Redux or Hooks would have been a huge pain.

      I'd be happy to provide more detail, if you are curious!

    2. 2

      Thank you so much for the kind words! 😊 Yeah, the tool is kind of built to suit our own needs where we basically wear all the hats at the same time. That's the reason fur such a blended feature set.

      The problem perhaps is that the number of people that do both design and development (especially React) might be quite rare, usually you're one or the other (not always of course, but the majority I would assume). For example, my designer mates know HTML and CSS, but not JavaScript or React. And until you have something that rivals Sketch or Figma in functionality and popularity, I can't see designers making the move to your product.

      This is the truth we are facing right now, haha 🤓

      Yeah, as of now it seems that Cruu is best suited for building out a quick MVP for a dev-design duo (or a single person who does both).

      Your products Archetype and Yourganize look really cool, followed! Something I always struggled a lot is how to find the right font combination, so Archetype looks very interesting to me. I'd likely use it.

      Please let me know if I could be of any help to you in the future!

      Thank you!

      1. 1

        Hey, thanks a lot!

        Yes we’re going to add to Archetype shortly to make it easier to choose font pairings. Perhaps people use it because it fits in with their process they already have, as it exports to Sketch (we’d like to export to Figma too) or CSS and it’s just part of the design/build process, whereas perhaps with your app people may have to move their whole project over to you which requires validation from other users and trust, which would take a while to build up.

        Is there any way you can perhaps have your tool just export parts of the design process that are difficult in Figma/Sketch and that devs find repetitive. For example, pre made grids, styled contact forms, opening menu bars - Predesigned and built components that could be exported by devs that don’t want to design from scratch?

        Thanks for connecting! If we ever need help with Archetype I’ll look you up! Actually it would be cool to connect anyway if you’re a React guy 👍

        What’s does Mithril do? Does it help you do the drag and drop layout? Can’t imagine how you’ve converted that to React components...

        1. 2

          Wow, thank you for this interesting idea! 😊 Yep, please let me know, I'd love to be able to help out fellow hackers!

          https://mithril.js.org/ is a tiny framework. It takes the same place in your stack as React for example. It doesn't have anything built-in that helps with generating React components, but it's just a very fast, easy to use front end framework.

          Thank you for all the great feedback. Looking forward to dabbling with Archetype. 🤓

  28. 2

    Your product is pretty cool, but I don't see myself or other developers using it. As you mentioned in your post, writing your components by hand feels faster than using a WYSIWYG tool that generates who knows what code that you will have to maintain in the future and that could have any potential bugs/performance issues/compatibility issues.

    WYSIWYG editors are not meant for developers, so your target audience might be different. But if it's non-developers, why would anyone care about what code it generates? As far as I see it, it's either people who don't know how to code and want to create something and don't care about code OR people who know how to code and want to code, so using a visual editor does not seem to help. I personally think there is no middle ground, you either code or you don't.

    1. 1

      Thanks for writing this... 🤓 yeah you are spot on about the audience. We need to be more precise whether we want to focus on great developer or great designer experience.

  29. 2

    React Dev here, I also lead a bunch of React Devs at my job. Most of my junior devs and spend ton of their time in alignment and responsive UIs. Even senior devs take considerable amount of time in creating new GUI, if there is any tool which can reduce this time I am in for purchase. I purchased and using DivJoy for my personal projects, I am happy with that. But that is not the right for full-fledged application GUI development.

    I don’t see the value in drag and drop editors.
    I completely disagree with this. When someone says they don't see value in it, either they are very well experienced in GUI work or they have lot of time to spend on UI. I haven't seen a solid drag-and-drop editor for web applications(not just mobile web, desktop browsers). I strongly believe there is huge potential for that.

    I know about Bootstrapstudio kind of editors but the issue with them is they won't emit ReactJS code and they wont very well integrate with existing ongoing projects.

    1. 2

      I don’t see the value in drag and drop editors.

      The biggest problem with drag and drop editors that generate code for me that I'm expected to maintain in the future is that I have no idea how they work or what code they will generate. Even looking at "cruu.io" I can't really predict how complicated oreasy it is to add functionality to the generated components, or to re-used components, or make them dynamic, etc.

      If you can't add any React functionality in the editor itself, then it's just a HTML/CSS WYSWIG editor and shouldn't really be limited to react or even related in any way to React.

      1. 1

        Thank you so much for the feedback! 😊 Would you spare a moment to take a look at our developer docs? All the questions are answered there, specifically about how to make the components dynamic and how to customize them.

        Please take a look at https://docs.cruu.io/code/overrides-system if you have a few moments, and let me know if this is something that makes sense from a developers perspective?

        Thank you sooo much for your time, we appreciate your comments! If there is anyway we can be of help to you, please let us know! I'm following your product UserTrack! It looks awesome, we might actually be interested in testing it! 😊

        1. 2

          Thanks! From the first look it looks like it's documenting the code part of adding listeners. I would have expected to somehow view or add some listeners in the visual editor, otherwise it would just be me writing code the way I am used to, with or without cruu.

          Also the code generated doesn't seem to be optimal (personally I prefer to React.memo most of the components in order to improve render performance in heavy applications). I think the code would be good for basic apps and scaffolding but I think it wouldn't make sense to use it for large apps.

          So personally I will not use cruu because:

          • I can already somewhat visual edit components using the Dev Tools or just change the code with hot reloading
          • I already have an app, and I think cruu is useful only for when you start a new app
          • I learned how to use and use MaterialUI in my projects. They already provide many components that are really easy to integrate and customize. I have no idea what type of components cruu generates and how good they are in terms of responsiveness, accessability, customizability. I don't know what the "building blocks" are from the landing. If there are no building blocks, do I have to create everything from scratch? That seems like it will take more than than using an UI framework and just editing their components.

          Personally I only had bad experiences with visual editors, starting with DreamWeaver or MailChimp email editor. I prefer for example to write my blog posts in markdown than in a visual editor, as I find it quicker to edit and understand the actual structure of the output. I am a coder, I code, don't drag and drop. I also think I prefer to have more fun and code by hand than do something quicker without having the feeling that I did it myself. I remember reading that there were companies selling pre-made food (microwave ready) and realized clients were happier when they had to mix a few ingredients together themselves instead of the ingredients being put all together. I think I tap into the same feeling where I prefer to spend a bit more time and feel like I did it myself and understand the "ingredients" than have something that just works.

          Thanks for following userTrack, it is really useful for me to see the data for my own landing page, could be really useful for you to improve conversions, but I do think the problem with cruu is now more with finding the right product-market fit than improving the landing page.

          1. 1

            This feedback is worth gold! Thank you so much. Yeah userTrack seems like a neat product. Please let me know if we can be of help to you! 😊

    2. 1

      Maker here... 🤓 Thank you so much for this feedback!

      Omg, yes. It takes a ton of time, no one really enjoys doing it, it feels boring and most importantly - time is better spent on implementing business logic than small formatting changes! Yes, this is the reasoning behind Cruu.

      How do you currently solve this problem? Do you have a process in place with designers? Do you reuse code from previous projects?

      Thank you soo much for your feedback, we appreciate your insightful comment, because it helps us understand the problem from the eyes of experts. 😊

      1. 2

        Our products are not for general public, our designers only decide the high level UI specs like primary-colors, border, etc. Designer wont come into picture in later development. Most of the time we copy the base code from previous projects.
        Generally junior devs take couple of months to master the CSS, layout etc. For one of the UI heavy project, layout development and bugs related to layout took around 25% of the UI work. If we were developing a desktop app with a visual designer like Visual Studio it could have taken like 5% of the UI work. So far I couldn't find single reliable Visual Designer for web applications in the market.

        1. 1

          Wow, I see, this makes a ton of sense! 👍 Thank you for sharing your internal process and being very precise with the numbers, this is incredibly helpful to understand the problem better.

          It's quite a challenge to build a reliable UI designer, our hope is to provide just that.

          Thank you so much for taking the time to explain this. Is there a way we could be helpful to you? 🤓

          1. 1

            Thank you so much for taking the time to explain this. Is there a way we could be helpful to you? 🤓

            If you are referring to using your visual designer, I will surely try it once it is in mature state. Right now there is still some work to be done there.

            If you want I can give you a pain-point which we are ready to pay.

            Lets not talk about the complete visual designer, just the layout designer. I want a tool with which I can easily make visual layout, only alignment things like -center,left, right... all the flexbox layout.. This should look good in all breakpoints. I don't mind spending time to customize for each layout, but I don't want to touch the css for layout part it should all be visual. Then for each form/panel I can do this and take the generated code and use it in our app. (Note: I haven't thought about the consequence of adding this generated layout into the existing app and that can create conflicts etc etc).

            I just need a tool with which I can quickly create visual components, generate the layout and export that code in css, html, reactjs and include it in our app. (majority of our apps are in Bootstrap). I am not sure if there is global requirement for such layout designer, this is only our pain-point.

            Right now my org is considering to hire a part-time dev only for this job, it is expensive. Feel free to contact me if you need more details, I can also show you the kind of screens we are designing.

            1. 1

              Hey thanks for the reply! I was thinking in any way, I'd love to help you out, since you've provided so much value to me with the thoughtful comments. 😊

              Yeah this does seem like an interesting use case. I'd be excited to see the kind of layouts you have in mind, just to get a rough idea, maybe there is a way to automate that boring task.

              1. 1

                Its not possible to automate the layout generate through code. I even thought of writing a small javascript object and run a command to auto-generate a responsive html/css UI. But that wont fit well within our application. So the only way is to hand code each UI or have a visual editor to do that job. Our UI is bit complex and some of it is dynamically generated. I can't share the UI screens on public page like IH.

  30. 2

    WYSIWYG is a tough sell for developpers. Even in the old days, it ws the promise to build products in weeks instead of months that made managers kind of impose them. As it turned out it was not true.
    Right now i cannot see how i can ship something if i don't control the code, especially if i have a set way of doing things ( like some patterns that i use, or librairies, or design systems / component libraries, ...) , and i have a lot of boilerplate code that i can just tweak to suit a lot of my needs...

    1. 1

      Maker here... 👋 Thank you for sharing your view on this! Yeah, it seems like if you have a solid foundation and boilerplate you can use, and that you are already confident in, then a tool like Cruu is not something that solves your problem...

      This is incredible feedback, and we are really grateful for being honest and to the point 😊

  31. 2

    Its already been mentioned I think but yeah I think you are targeting the wrong audience. You should be targeting designers. If you can make it so designers build the UI such that developers just get a library of components that they then wire up that would be great. i.e in the same way I can just use material UI to make a web app. As a developer I don't really get excited by something that replaces coding with using a UI.

    1. 1

      Thank you so much for providing insight like this! 😊 Yeah, the benefit of receiving all components ready for use from the design is something we wanted to provide with Cruu.

      But yes, a developer turns out will always prefer code. Thank you for explaining it in such a clear and concise way.

      Please let me know if I can be of any help to you! 🤓

  32. 2

    I would use this if you could import a UI design library into it when desiging like Argon or Material UI

    1. 1

      Thanks for the feedback! 🤓 Yeah, we do have this planned. It's something we are excited about as well.

  33. 2

    It seems like yours is a nice and well-executed builder. And I am building one (in a different space) so I understand how hard it is and yours seems good. There's one problem: developers love to code. Building no-code tools for developers, especially UI, is hard.

    Have you thought about looking for a less technical, different niche?

    Also, unless you're pouring into it a lot of money, simply work less on it, and take a side gig consulting. Or take a break.

    You don't need to undo all your work.

    1. 1

      Thank you so much for the feedback! 🤓 I looked up the product on your profile - Formtoro! Please let me know when it's ready, I'd be more than happy to give feedback and help out if possible 😊

      Thankfully, we're not pouring money into this, it's a passion project of mine and my cofounder, and we just work really well together, so it's a low-stress thing at the moment. We are just excited to learn, iterate, and build something!

      Thanks for the kind words on execution of the builder. It sure was hard to figure out some of the details. If you'd like to chat on a technical level about it, I'd be happy to share some of the solutions we've come up with over the last year of development and trial and error 😄

      As far as the niche goes, we are looking at pivoting into a few directions, including less technical, low-code options, since getting coders to appreciate drag and drop design is not proving to be too easy at the moment.

  34. 2

    Have you tried to integrate the tool with existing frameworks where there's an active community behind it?

    For example, everyone seems to be raving about TailwindCSS. Perhaps make it easier for people to adopt Tailwind, generate clean css/js with your drag-n-drop tool?

    Also, can your tool be used as a React component? perhaps release the framework under Open source license and let other devs integrate the UI builder within their app.

    1. 1

      Firs of all, thank you for the insightful feedback! 😊

      • Yes, we were planning on integrating with existing frameworks, so that way, we could get involved with the communities behind them.
      • At the moment, the UI builder is not readily available as a React component. What kind of use case do you foresee with people using the builder in their own app?

      I have followed your product Shtack! Looks interesting, seems like something we could use on our next project. 👍

      Thank you so much!

  35. 2

    This sounds very cool - well done on all the hard work!

    I'm a coder & designer so this type of tool sounds like it has good potential for me. I've recently started using Framer X, which is fantastic - however you can only import React components - and not create & export them.

    The particular use-case I'm using Framer for is to rapidly build MVPs for our own internal products & for clients. I think Cruu could hit a sweet spot in this area if it works well!

    1. 1

      Thank you so much for the feedback! 😊Yes, we loved using Framer, but since we were a small team, it always seemed that no matter how much effort we'd put into a Framer prototype, at the end, we'd still have to go back and re-code everything.

      Often this process would produce differences, and would require reviews. In what format do you deliver the MVP you produce for the client?

      Thank you soo much for sharing this valuable insight!

      1. 1

        No problem! We'd typically first deliver HTML based prototypes using Framer's web export (which is pretty great).

        After the prototypes are approved we'd code something in React by hand.

        If we could use Cruu like we use Framer, but then export actual React components - that would be truly awesome!

        1. 1

          Fantastic, thank you for providing incredible insight! Please let me know if there is a way I can help you! 😊

  36. 2

    I consider myself a basic React developer, about 3 years of experience, that said I only use it every few months so I need to look up things from time to time and refer to previous projects a lot. I have over 6 years or React Native.

    I looked at your videos.

    I setup an account and gave it a try. I found that it needed Chrome, not a huge thing, I started with Firefox.

    To be honest I struggled to get started to build a components.

    I wanted to add top padding, this took a while to figure out.

    I wanted to center the item, not really as simple as maybe it could be.

    That being said, I think its a very cool idea and I would use it.

    If there was more training (lets chat if you want some tips) and you can get started from the training then that would make a huge difference.

    I think something else that would be really cool is to have a set of library components so you don't have to start from scratch you could grab a library item and make changes then use in your project.

    Think of a social messaging app or something like that, maybe even a back end to support this app (I would be happy to help build the back end for a sample app if you want).

    If there was "Round Trip" engineering so that I can make a component, then generate it, then make a change in the code and bring it back into the UI editor and make changes, that would be really cool as well, I'm not sure how much does or does not work since I did not attempt to do this.

    Overall - Great Work! Please continue.

    1. 1

      First of all, thank you so much for the feedback. It is so generous of you to offer help, we are very grateful for that. We do have plans to make sample apps, but we hoped to keep the 😊 backend part as light as possible to avoid adding complexity. 🤓

      Yes, the usability of the app needs to be improved, we are working on that. A lot of bases to cover, thank you for taking the time to try it out.

      We were thinking about avoiding the "round trip" by having every generated component expose an API that allows to override anything using custom code. Since you are incredibly experienced as a software engineer, would you mind taking a look at our developers docs specifically related to this part? Do you think it would allow you to work without having to edit the generated code?

      https://docs.cruu.io/code/overrides-system

      We would love to get a chance to chat with you if you would have time. Please feel free to schedule a call here https://calendly.com/cruu/30min we are always available to chat!

      Again, thank you so much for taking the time to provide this incredible feedback!

  37. 2

    I think there is a place for drag-and-drop UI development for web. In the 90s, RAD GUI builders were king when it came to developing custom business apps (VB, MS Access, PowerBuilder, etc.). Most importantly, they allowed a developer to create apps quickly, which meant they were affordable for most small businesses. With the rise of web apps and the subsequent death of desktop apps, those same small businesses can now no longer justify the cost of what it takes to develop a usable web based business app.

    What used to take 2-4 weeks to build, now takes upwards of 6-12 months in development time to accomplish the same functionality. If a DnD GUI builder for web apps allowed a developer to cut the time in half, it could re-open a significant portion of the SMB market that has been priced out, back up again.

    As a Python dev, Anvil has caught my eye as a potential contender in this area.

    Another issue you may run into is developers thinking your technology is "just a toy" compared to the complex toolchain they use now that took them years to master. VB and MS Access apps had this problem in the 90s, yet I managed to crank out apps for scores of businesses back then that were efficient and cost effective. And many of the apps I built back then are still in use today (for better or worse).

    1. 1

      Wow, thank you soo much for this incredible comment. A lot of valuable insight right here! 😊

      Yeah, it's interesting, if you even go further into the past, and look at some of the early Apple developer videos, like Apple 2, one cannot help but wonder. What happened with this technology? Why didn't this evolve into holograms by now?

      Thank you for mentioning Anvil. As I am not a python dev, it was not on my radar, but it's definitely worth checking out.

      If there is any way me or my cofounder can be of help to you, pease feel free to reach out. Thank you again!

  38. 1

    You target devs, devs have usually what I call the dreamweather effect.

    They just find this like most WYSIWYG design programs much less beneficial than writing code, and not really essential.

    They will say that writing your own code is better and faster. If you use a WYSIWYG editor, you end up editing a lot of the code "manually" anyway, so why not just start out that direction?

    1. 1

      Hey, thank you for explaining it in a very clear way like that! 😊 We are also finding that most developers feel this way too.

      If there is a way we can be helpful to you, please let us know! 🤓

  39. 1

    Let's say I generate some cool design but to integrate perfectly with my app I need to tweak some stuff, you say I can pass props, is that enough for the tests you've done? What if someone wants to tweak a tiny bit of the generated code... that generated code will be overwritten when we resync right?

    1. 1

      Hey, thank you for asking this question, and for taking the time to explain your use case! 😊The idea behind Cruu is that instead of having to change the source code, you can customize everything by passing props from the outside.

      If you got 5 minutes, please take a look at our developer docs, which explain how this can be done: https://docs.cruu.io/code/overrides-system

      Thank you so much for your time! I checked out your product - Portabella, looks very impressive. I think this should actually be default how apps work! Definitely worth checking out, I just followed it! 👏

      Just curious, how do you provide technical support, when it's theoretically impossible to see the data and fix things for the user? 😊

  40. 1

    This comment was deleted a month ago.