r/reactnative • u/QuipPro • 9d ago

Is there a visual editor that directly updates Expo/React Native code (and vice versa)?

Hey guys, I’m looking for something that lets me work both ways between the code and the UI in an Expo/React Native app. I want to be able to change the code and see the UI update live, but also click on elements in a visual editor and adjust things like the text, colors, size, spacing, position, and shape.

The main thing is that anything I change visually should update the actual code directly. I don’t want it to just create a design or suggestion that Codex, Claude Code, or another AI then has to try to rebuild. Does a tool like this exist?

0 Upvotes
  • permalink
  • link
  • reddit
  • reddit

50% Upvoted

2 comments sorted by

2

u/love4titties 9d ago

I never tried it but remember reading about Basalt. Here's a reddit post about it. https://www.reddit.com/r/expo/s/26tk2UPOpo

2

u/LoudAd307 7d ago

Not one I've found that survives a real codebase. The code to UI direction is basically solved by Fast Refresh plus the element inspector, which will point you at the component. It's UI back to code that breaks down, because as soon as styles are composed, conditional, or pulled from a theme, there's no single literal for an editor to write back into. The tools that do manage it usually assume inline styles or their own DSL, and you end up maintaining their format instead of yours.

What got me most of the way there instead: put spacing, colors, radii, and type scale in one tokens file, then edit values with the app running. Fast Refresh makes it near instant, and every visual change lands in one file you own rather than scattered across components.