Preface- I was frustrated by how often apps introduce design and layout changes while constantly shipping new features that atleast I personally never use.
So I thought, why not fix this by making the existing UI editable without changing any of the underlying functionality?
And that's how Symbiotic-UI was born.
So, what is Symbiotic-UI?
Symbiotic-UI is a UI framework that lets end users customize the look and feel of their applications (currently supporting Expo only).
Users simply describe the changes they want in natural language. An LLM parses the request and generates the UI operations that need to be performed. A runtime UI mutation engine then applies those operations and updates the interface instantly.
Watch Full Demo Here - LinkedIn | X (Twitter)
How did I make this work?
Currently Supported Operations
HIDE & SHOW : Changes the visibility of a component.
STYLE : Updates the appearance of the selected UI element using supported design tokens such as background color, text color, borders, spacing, and positioning.
REORDER : Shift UI elements within a layout. Works especially well with Flexbox.
How to Use
I made sure the developer experience remains intact. (I know it sounds archaic in the world of AI, but I still care about it.)
Developers simply wrap the layout or JSX they want to make editable inside <SymbioticUI />
They then provide a sym-name (the component name) and semantic sym-ids to elements such as buttons, images, or containers to help the LLM understand what each section represents—for example, header, footer, or profile-btn.
The LLM parses user prompts like: "Shift the profile button to the left."
and returns a JSON Operations object.
Using the useSymbiotic() hook, developers can then perform two operations:
addOperations(): Updates the UI and saves the operations to local storage.resetOperations(): Clears all saved operations and restores the original UI.
Current Hurdles
Symbiotic-UI currently lives as an in-project framework on GitHub. I plan to release it as an npm package, but before that I'd really appreciate your feedback and suggestions.
Some of the challenges I'm still working through are:
- LLM hallucinations
- React state management and UI hydration edge cases
Tech Stack
- Expo React Native
- TypeScript
- Tailwind (NativeWind)
- OpenAI
- Express.js
GitHub: SymbioticUI (⭐ if you liked the idea)
Why the name Symbiotic-UI you ask?
The name was inspired by Marvel's Venom Symbiote—something fluid and dynamic that constantly adapts and changes its form.
I wanted the UI to behave the same way.
I'd highly appreciate your thoughts on this idea and project.
Feel free to call it stupid—I genuinely want honest feedback.
Top comments (0)