{"id":13554907,"url":"https://github.com/gridaco/dynamix","last_synced_at":"2026-01-11T04:52:33.028Z","repository":{"id":42709704,"uuid":"232697260","full_name":"gridaco/dynamix","owner":"gridaco","description":"📱 dynamix - The missing bridge for web / webview for hybrid apps","archived":false,"fork":false,"pushed_at":"2024-01-07T03:56:14.000Z","size":23354,"stargazers_count":73,"open_issues_count":11,"forks_count":3,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-10-29T22:33:46.318Z","etag":null,"topics":["code-push","code-push-server","dynamic","dynamicwidget","express","figma","flutter","flutter-icons","grpc","nextjs","nodejs","react","react-native","socketio","typescript","ui","ui-components","uikit"],"latest_commit_sha":null,"homepage":"https://grida.co/dynamix","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gridaco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"open_collective":"grida"}},"created_at":"2020-01-09T01:43:08.000Z","updated_at":"2024-08-20T03:05:46.000Z","dependencies_parsed_at":"2023-07-16T19:48:53.580Z","dependency_job_id":"52099c14-b1c7-42d3-b735-8714e4f29b31","html_url":"https://github.com/gridaco/dynamix","commit_stats":{"total_commits":280,"total_committers":4,"mean_commits":70.0,"dds":0.2785714285714286,"last_synced_commit":"e83392aea52e358d50247781af65bb47cd2ea7a9"},"previous_names":["softmarshmallow/remote-ui","gridaco/dynamix","gridaco/dynamic","softmarshmallow/dynamic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fdynamix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fdynamix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fdynamix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gridaco%2Fdynamix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gridaco","download_url":"https://codeload.github.com/gridaco/dynamix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234868173,"owners_count":18899232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-push","code-push-server","dynamic","dynamicwidget","express","figma","flutter","flutter-icons","grpc","nextjs","nodejs","react","react-native","socketio","typescript","ui","ui-components","uikit"],"created_at":"2024-08-01T12:02:57.407Z","updated_at":"2025-10-06T11:30:23.323Z","avatar_url":"https://github.com/gridaco.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://grida.co/dynamix\"\u003e\n    \u003cimage src=\"./.readme/cover.png\" /\u003e\n    \u003ch3 align=\"center\"\u003eDynamix by Grida\u003c/h3\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Dynamix. Build Hybrid Apps.\n\u003c/p\u003e\n\n\u003e Dynamix. a remotely configured user interface with super flexibility. Make web / app / webview / server to work as one.\n\n## With Dynamix, You can...\n\n- Mix multiple frameworks in one app with ease.\n  - Use NextJS for Web \u0026 Webview, Flutter for App.\n- Manage User authentication in one place.\n  - Login on App, use the same session on Web.\n- Configure UI Remotely.\n  - Provide UI Specs on server, Great for A/B Testing \u0026 User Customization.\n  - Form validation on server, display errors on client with ui response\n\n## Why Dynamix?\n\nWeb is the best platform we have. Depending Soley on Mobile App framework, such as Flutter can slow down your development speed. With Dynamix, you can mix App UI \u0026 Web UI in one app, with shared state management and access to native features. Plus, with remote-ui, you can configure your app's pages remotely, having business logic on server side.\n\n\u003ch3 align=\"center\"\u003eHow it works\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimage src=\"./.readme/architecture.png\" alt=\"Dynamix Architecture\" /\u003e\n\u003c/p\u003e\n\nserver - dynamically change client specs from server\n\nclient - dynamically load content from server \u0026 with dynamic layout / component / action specs\n\n## Packages\n\nDynamix comes with multiple packages for different platforms.\n\n\u003e for instance, if you are using react-native for app and nextjs for webview web, you can use `@dynamix/react-native` for react-native and `@dynamix/react` for nextjs.\n\n| Packages                                                                                                                                                            | platform         | description                                                   |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------- |\n| [`@dynamix/react`](./packages/dynamix-react/) [![npm]](https://www.npmjs.com/@dynamix/react)                                                                        | react            | dynamix on react                                              |\n| [`@dynamix/react-native`](./packages/dynamix-react-native/) [![npm]](https://www.npmjs.com/@dynamix/react-native)                                                   | react-native     | dynamix on react-native                                       |\n| [`@dynamix/react-native-webview`](./packages/dynamix-react-native-webview/) [![npm]](https://www.npmjs.com/@dynamix/react-native-webview)                           | react-native     | dynamix react-native-webview wrapper                          |\n| [`react-native-webview-window-declaration`](./lib/react-native-webview-window-declaration/) [![npm]](https://www.npmjs.com/react-native-webview-window-declaration) | web (typescript) | dts type utility for webprojects used on react-native-webview |\n| [`x_icon`](./platforms/flutter/packages/x_icon) [![pub]](https://pub.dev/packages/flutter_remote_icon)                                                              | flutter          | dynamically load flutter icons with name string               |\n| [`x_icon_generator`](./platforms/flutter/packages/x_icon_generator) [![pub]](https://pub.dev/packages/x_icon_generator)                                             | flutter          | x_icon codegen for custom icons                               |\n| [`x_color`](./platforms/flutter/packages/x_color) [![pub]](https://pub.dev/packages/x_color)                                                                        | flutter          | dynamically load flutter color with name string               |\n| [`x_action`](./platforms/flutter/packages/x_action) [![pub]](https://pub.dev/packages/x_action)                                                                     | flutter          | dynamix flutter actions                                       |\n\n  \u003c!-- | [@bridged.xyz/remote-ui-core](./core) [![npm]](npm-remote-ui-core)                                              | NodeJS (for server) | --\u003e\n  \u003c!-- | [@bridged.xyz/remote-ui-server](./server) [![npm]](https://www.npmjs.com/package/@bridged.xyz/remote-ui-server) |                     | --\u003e\n\n## dyanmic actions\n\n![](./.readme/demo-dynamic-actions.gif)\n\n## Installation\n\nServer side\n\n```shell\n# install with yarn\nyarn add @bridged.xyz/remote-ui-core\n\n# install with npm\nnpm install @bridged.xyz/remote-ui-core\n```\n\n## How to use\n\nserver side (express/ts)\n\n```ts\nimport * as rui from \"@bridged.xyz/remote-ui-core\";\n\nrouter.get(\"ui\", (req, res) =\u003e {\n  const ui = new rui.Layout({\n    icon: rui.icons.material.note.uri,\n    title: new rui.Text(\"hello world!\"),\n  });\n  res.json(ui).send();\n});\n```\n\napp side (flutter)\n\n```dart\nimport \"package:flutter_remote_ui/flutter_remote_ui.dart\"\n\nWidget buildRui(BuildContext context){\n final ruiData = fetchRuiDataFromServer();\n return RemoteUI.of(context).build(ruiiData);\n}\n```\n\nConcepts \u0026 onthology will be documented under notion document, which will be added soon.\n\n## Platform support\n\n|                | usage                                                                                      | language | runs on                                                    | example                                                                                                                                                                                          | Ready? |\n| -------------- | ------------------------------------------------------------------------------------------ | -------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |\n| core           | rui core library ([@bridged.xyz/remote-ui-core](./core))                                   | TS/JS    | NodeJS                                                     | [@bridged.xyz/remote-ui-core](https://github.com/softmarshmallow/remote-ui/tree/master/core)                                                                                                     | ✅     |\n| flutter        | [flutter_remote_ui](./flutter)                                                             | dart     | iOS\u003cbr /\u003eAndroid\u003cbr /\u003eOSX\u003cbr /\u003eWindows\u003cbr /\u003eLinux\u003cbr /\u003eWeb | [flutter-remote-ui](https://github.com/softmarshmallow/remote-ui/tree/master/flutter)\u003cbr /\u003e[flutter remote ui example](https://github.com/softmarshmallow/remote-ui/tree/master/flutter/example) | ✅     |\n| express        | remote-ui-core wrapper for ExpressJS ([@bridged.xyz/remote-ui-server](./server)) (in 2020) | TS/JS    | NodeJS (server)                                            | [express](https://github.com/softmarshmallow/remote-ui/tree/master/server/examples/express), [plain](https://github.com/softmarshmallow/remote-ui/tree/master/server/examples/plain)             | 👩‍💻     |\n| iOS native     | note supported (2021 Q2)                                                                   | swift    | iOS OSX                                                    |                                                                                                                                                                                                  | 👩‍💻     |\n| android native | note supported (2021 Q2)                                                                   | kotlin   | Android                                                    |                                                                                                                                                                                                  | 👩‍💻     |\n| vue            | vueJS wrapper for remote-ui                                                                |          | Web                                                        |                                                                                                                                                                                                  | 👩‍💻     |\n\n## Concepts\n\n| concept | description                                                                                                                                   | example | demo |\n| ------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---- |\n| action  | provide client action data to be executed on specific events                                                                                  |         |      |\n| layout  | register \u0026 call layouts with built data dynamically                                                                                           |         |      |\n| icon    | register \u0026 use font based icons or svg icons dynamically                                                                                      |         |      |\n| image   | use registered local assets or remote assets dynamically                                                                                      |         |      |\n| route   | specify route spec to provide routing, building menus, shortcuts, etc..                                                                       |         |      |\n| modal   | show modals with custom transition with desired content                                                                                       |         |      |\n| client  | the client is the app instance, customize with your database user                                                                             |         |      |\n| session | the session of single flow. show modal, get event of \"ok\" button clicked, trigger the action in single session so it can be tracked \u0026 managed |         |      |\n\n### Remote Icons\n\n```typescript\nimport * as rui from \"@bridged.xyz/remote-ui-core\";\n\nconsole.log(rui.icons.material.note);\n\n/// logs\n/// RemoteIconData {\n///  uri: 'material://Icons.note',\n///  type: 'MATERIAL_NATIVE',\n///  asset: undefined }\n\n/// can be used directly on flutter\n```\n\n## Remote Route Specs\n\n```typescript\nimport { routes } from \"@bridged.xyz/remote-ui-core\";\n\nconst MOCK_DATABASE = {\n  users: [\n    {\n      id: \"1\",\n      name: \"softmarshmallow\",\n    },\n    {\n      id: \"2\",\n      name: \"GY\",\n    },\n    {\n      id: \"3\",\n      name: \"gin\",\n    },\n  ],\n};\n\nfunction fetchUserFromMockDatabase(id: string): { id; name } {\n  return MOCK_DATABASE.users.find((e) =\u003e e.id == id);\n}\n\nroutes.register(\n  new routes.spec(\n    new routes.spec\u003c{ id }, { id; name }\u003e({\n      key: \"/users/:id\",\n      pattern: \"/users/:id\",\n      dataFetcher: async (p) =\u003e {\n        return fetchUserFromMockDatabase(p.id);\n      },\n      title: {\n        default: \"user detail\",\n        template: \"user {{ data.name }}\",\n      },\n    })\n  )\n);\n\nconst route = \"/users/1\";\nconst spec = routes.match(route);\nroutes.build(spec).then((d) =\u003e {\n  console.log(d);\n});\n\n/// logs\n/// { title: 'user softmarshmallow',\n///  description: undefined,\n///  icon: undefined,\n///  route: '/users/1' }\n```\n\n## Contribution\n\n[contribution guideline](CONTRIBUTING.md)\n\n## Contributor's documentation\n\nwe are using [figma file](https://www.figma.com/file/DpbDmtkGzz1g3aXPt5MmgS/remote-ui?node-id=135%3A32) for the contributor's documenting and suggesting roadmap.\n\n## TODO\n\n- remote ui dashboard -\u003e customize \u0026 configure your app through web interface remotely, realtime.\n\n## related projects\n\n- [bridged.xyz](https://github.com/softmarshmallow/bridged.xyz)\n- [bridged's inapp-bridge](https://github.com/softmarshmallow/inapp-bridge)\n- [bridged's schema-studio](https://github.com/softmarshmallow/schema-studio)\n\n### Sponsors\n\n### References\n\n[dynamic_widget](https://github.com/dengyin2000/dynamic_widget)\n\n### Use dynamic with figma plugin / bridged console\n\n**comming soon features**\n\n- sync assets directly (dont download, put it in asset. bridged provides bucket and usable resource uri. s3 GCP supported)\n- live update data\n\n### Blogs\n\n[starting remote ui project](https://medium.com/launchers/starting-remote-ui-project-4b1d0841afc2)\n\n[npm]: https://img.shields.io/badge/npm-latest-brightgreen\n[pub]: https://img.shields.io/badge/pub-latest-brightgreen\n[npm-remote-ui-core]: https://www.npmjs.com/package/@bridged.xyz/remote-ui-core\n[pub-flutter_remote_ui]: https://pub.dev/packages/flutter_remote_ui\n","funding_links":["https://opencollective.com/grida"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridaco%2Fdynamix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgridaco%2Fdynamix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgridaco%2Fdynamix/lists"}