Export to high-quality React code / eject

[prakhargupta1]

Problem

1. Visual vs. Pro-code. In our latest survey: https://mui.com/blog/2021-developer-survey-results/#if-mui-considered-building-a-low-code-tool-what-primary-use-case-would-match-your-needs, many developers entertain the idea that generating high-quality React code after visually building could be great. While people are pretty bad at predicting what they really want and how they will really behave, this is an interesting data point for us. In practice, I don't think that it means that developers want actually a visual tool that outputs codes, e.g. https://openchakra.app/, but how developers would appreciate a tool that can intertwine visual development with code development. Each has its strengths in different contexts.
2. Lock-in fear. An only visual development tool could lead developers to not even consider trying the tool out because they would fear that their work will be lost, as soon as they hit a customization wall.

Pains

• UiFlow
  • Most upvoted feature request: https://uiflow.canny.io/feature-requests/p/export-to-code
  • https://www.producthunt.com/posts/uiflow-studio

Benchmark

• https://news.ycombinator.com/item?id=31364081
• https://reactstudio.com/
• The same problem but for Figma https://github.com/mui/mui-design-kits/issues/43
• Webflow HTML export https://university.webflow.com/lesson/code-export

  Export your Webflow project's HTML, CSS, Assets, and Javascript.

• Flutter flow sync with GitHub https://flutterflow.io/features.html

  As you build, FlutterFlow generates clean Flutter code that will run on iOS, Android, Web, and Desktop.

• Draftbit https://draftbit.com/features

  Export your entire build as one clean, repo-ready package.

• Animapp https://support.animaapp.com/en/articles/2627030-how-to-export-figma-xd-or-sketch-to-html
• Sencha Architect https://web.archive.org/web/20101110003420/http://www.sencha.com/products/designer

  Save and Export Code. Save projects to your desktop. Export object-oriented code to the IDE of your choice.

• Qt Design Studio https://www.qt.io/product/ui-design-tools

  Enjoy the automated code. Qt Design Studio generates the fully functional code from your design. You don't needlessly have to write a single line of code. 2011 version:

https://user-images.githubusercontent.com/3165635/166156774-ee4d9338-381c-4cc2-ac14-4d4575d4a193.mov

• https://app.stackbit.com/create?theme=typescript-starter

• https://app.flutterflow.io/

[oliviertassinari]

@newguy-123 I have iterated on the content of this issue, added more details and options

[ShaalanMarwan]

Any update about this feature ?

[oliviertassinari]

I experienced the same need from https://github.com/mui/mui-public/pull/147. My ideal workflow would have been:

• Start by using #2615
• Export to MUI X Charts as I need to customize the tooltip and the Toolpad low-code component doesn't support it

Right now, it feels like having to start from https://mui.com/x/react-charts/ is more work than it should be.

[prakhargupta1]

While code generation and ejection can help in quickly scaffolding an app, the majority of future development is bound to be code-only. Instead, for use cases like admin applications, a combination of higher-level components and intelligent data management interfaces can be an option to code less and build fast. Check out https://github.com/mui/mui-toolpad/discussions/3311 RFC to read more on this idea.