Dynamix by Grida is an open-source remote UI framework that lets developers build hybrid apps by mixing web and native frameworks — such as Next.js for web and webviews and Flutter for mobile — with shared session state and server-driven interface configuration.
What is Dynamix?
Dynamix is a remotely configured user interface system. It takes UI specifications declared on a server using TypeScript or JavaScript and renders them on clients across React, React Native, and Flutter. The core package, @bridged.xyz/remote-ui-core, provides server-side primitives for layout, icon, image, route, modal, action, session, and client definitions, which are serialized to JSON and consumed by platform-specific runtimes like @dynamix/react, @dynamix/react-native, and Flutter utilities such as x_action. The project is maintained by Grida (grida.co).
Key Features
- Multi-framework mixing — Use Next.js for the web and webview components while Flutter handles the native app, all inside one project with shared state management and access to native device features.
- Remote UI configuration — The server provides UI specs that the client loads dynamically, enabling A/B testing, user-specific customization, and server-side business logic without shipping new app builds.
- Unified authentication session — Users can log in on the mobile app and reuse the same session on the web, with session management handled through the
sessionconcept in the core library. - Server-side form validation — Validation rules live on the server; the client displays errors returned in the UI response payload.
- Cross-platform packages — First-party packages exist for React (
@dynamix/react), React Native (@dynamix/react-native), a React Native WebView wrapper (@dynamix/react-native-webview), and Flutter utilities for dynamic icons and colors (x_icon,x_color,x_action). - Remote icons and routes — Icons can be referenced by URI (for example, a Material icon) and loaded dynamically; route specs with patterns and data fetchers let the server define navigation and menu structures.
- Multiple transport options — The core library can be used with Express.js or plain Node.js servers, with an official Express wrapper in development.
Who is it for?
- Hybrid app developers — teams building an app with both web (using Next.js or React) and native (using Flutter) components who want to share UI logic and session state.
- Product teams running A/B tests — developers and product managers can change layouts, icons, and actions remotely from the server without waiting for app store releases.
- Server-driven UI engineers — developers who prefer to keep business logic and UI decisions on the server, then render the corresponding components on the client dynamically.
What can you do with Dynamix?
- Decouple UI from app releases — Change a page’s layout, icon, or text by editing a server-side spec; clients fetch the new spec on the next request.
- Reuse one login across web and app — Implement authentication once with the server session and have both the Flutter app and the Next.js webview share the token.
- Validate forms server-side — Send form data to the server, let the server validate it, and receive a UI response that includes error messages displayed on the client.
How does Dynamix work?
- The server defines UI components using the core library, for example creating a Layout with an icon, title, and actions.
- The client (Flutter, React, or React Native) fetches the JSON spec from the server endpoint.
- The client runtime interprets the spec and builds the native widget or web component, including any actions to execute on events.
The platform support table in the repository lists the core library and Flutter as ready, while Express, iOS native, Android native, and Vue wrappers are in progress or planned. There is also a remote UI dashboard on the roadmap that would let you configure your app through a web interface in real time.
