{"id":37229931,"url":"https://github.com/puffinsoft/syntux","last_synced_at":"2026-01-15T03:35:46.129Z","repository":{"id":329262962,"uuid":"1118663704","full_name":"puffinsoft/syntux","owner":"puffinsoft","description":"[v0.2.x] Build generative UIs for the web.","archived":false,"fork":false,"pushed_at":"2026-01-04T18:10:58.000Z","size":3418,"stargazers_count":26,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-08T21:15:33.218Z","etag":null,"topics":["generative-ui","reactjs"],"latest_commit_sha":null,"homepage":"https://getsyntux.com","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/puffinsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-18T05:15:04.000Z","updated_at":"2026-01-05T05:44:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/puffinsoft/syntux","commit_stats":null,"previous_names":["puffinsoft/syntux"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/puffinsoft/syntux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fsyntux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fsyntux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fsyntux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fsyntux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/puffinsoft","download_url":"https://codeload.github.com/puffinsoft/syntux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puffinsoft%2Fsyntux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28442293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-15T00:55:22.719Z","status":"online","status_checked_at":"2026-01-15T02:00:08.019Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["generative-ui","reactjs"],"created_at":"2026-01-15T03:35:45.226Z","updated_at":"2026-01-15T03:35:46.121Z","avatar_url":"https://github.com/puffinsoft.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://raw.githubusercontent.com/puffinsoft/syntux/HEAD/docs/images/banner.png)\n\n\u003cp align=\"center\"\u003e\n\u003ci\u003esyntux\u003c/i\u003e is the generative UI library for the web. It lets you build generative UIs that are \u003cb\u003e\u003ci\u003econsistent\u003c/i\u003e\u003c/b\u003e and \u003cb\u003e\u003ci\u003eflexible\u003c/i\u003e\u003c/b\u003e.\n\u003c/p\u003e\n\n---\n\nhttps://github.com/user-attachments/assets/a930d35d-92ab-45f4-9f71-f7bc0380c4f1\n\n- ⚡ **Streamable** - display UI as you generate.\n- 🎨 **Custom Components** - maintain aesthetics and reusability.\n- 💾 **Cacheable** - reuse generated UIs with new values.\n\n⚠️ this library is still in **beta**. All npm versions are **stable**, but the API may change across versions.\n\n\u003ch3 align=\"center\" margin=\"0\"\u003e\u003ca href=\"https://github.com/puffinsoft/syntux/wiki\"\u003e➡️ view documentation\u003c/a\u003e\u003c/h3\u003e\n\n---\n\n### API\n\n\u003ci\u003esyntux\u003c/i\u003e is built for React and Next.js.\n\nOne component is all you need:\n\n```jsx\nconst valueToDisplay = {\n    \"username\": \"John\",\n    \"email\": \"john@gmail.com\",\n    \"age\": 22\n}\n\n\u003cGeneratedUI\n    model={anthropic('claude-sonnet-4-5')}\n    value={valueToDisplay}\n    hint=\"UI should look like...\"   \n/\u003e\n```\n\n*syntux* takes the `value` into consideration and designs a UI to best display it. `value` can be anything; an object, array or primitive.\n\n### Installation\n\nIn the root of your project:\n\n```\n$ npx getsyntux@latest\n```\n\nThis will automatically install the required components in the `lib/getsyntux` folder.\n\nWe use the [Vercel AI SDK](https://github.com/vercel/ai) to provide support for all LLM providers. To install the model providers:\n\n```\n$ npm i ai\n$ npm i @ai-sdk/anthropic (if you're using Claude)\n```\n\n---\n\n### Examples\n\n#### Basic Example\n\nGenerate a simple UI with a hint:\n\n```jsx\nimport { GeneratedUI } from \"@/lib/getsyntux/GeneratedUI\";\nimport { createAnthropic } from \"@ai-sdk/anthropic\";\n\n/* this example uses Claude, but all models are supported! */\nconst anthropic = createAnthropic({ apiKey: ... })\n\nexport default function Home(){\n    const valueToDisplay = { ... };\n    return \u003cGeneratedUI model={anthropic(\"claude-sonnet-4-5\")} value={valueToDisplay} hint=\"UI should look like...\" /\u003e\n}\n```\n\n#### Caching\n\nCache generated UI based on a user ID:\n\n```jsx\nconst cache: Map\u003cnumber, string\u003e = new Map();\nexport default function Home(){\n    const userID = 10;\n    const valueToDisplay = { ... };\n    return \u003cGeneratedUI cached={cache.get(userID)} onGenerate={(result) =\u003e {\n        cache.set(userID, result)\n    }} model={anthropic(\"claude-sonnet-4-5\")} value={valueToDisplay} /\u003e\n}\n```\n\n#### Custom components\n\nUse your own components, or someone else's (a library):\n\n```jsx\nimport { CustomOne, CustomTwo } from '@/my_components'\nexport default function Home(){\n   const valueToDisplay = { ... };\n\n   \u003cGeneratedUI components={[\n    { name: 'Button', props: \"{ color: string, text: string }\", component: CustomOne },\n    { name: 'Input', props: \"{ initial: string, disabled: boolean }\", component: CustomTwo, context: \"Creates an input field with an (initial) value. Can be disabled.\" }\n   ]} /\u003e\n}\n```\n\nThe component definitions (the `components` array above) can be generated automatically:\n\n```\n$ npx getsyntux generate-defs ./path/to/component.tsx\n```\n\nSee the [documentation](https://github.com/puffinsoft/syntux/wiki) for an in-depth explanation.\n\n---\n\n### FAQ\n\n\u003cdetails\u003e\n \u003csummary\u003eHow does generation work? (Does it generate source code?)\u003c/summary\u003e\n\nGenerated UIs must be *secure*, *reusable* and *cacheable*.\n\nAs such, *syntux* does not generate source code. It generates a schema for the UI, known as a \"React Interface Schema\" (RIS). See the question below to get a better understanding.\n\nThis schema is tailored to the `value` that you provide. It is then hydrated by *syntux* and rendered.\n\n![](https://raw.githubusercontent.com/puffinsoft/syntux/HEAD/docs/images/workflow.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003eHow does caching work?\u003c/summary\u003e\n\n The generated UI is determined by the React Interface Schema (see the above question).\n\n Thus, if the same schema is provided, the same UI will be generated.\n\n For simplicity, the schema is simply a string. It is up to you how you wish to store it; in memory, in a file, in a database etc,.\n\n Use the `onGenerate` and `cached` properties to retrieve/provide a cached schema respectively.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003eWhat about state? Can state be generated?\u003c/summary\u003e\n \n Generating state is an anti-pattern and leads to poorly performing, insecure applications.\n\n If you need to handle state, wrap non-stateful components in stateful ones, then pass those as custom components to *syntux*.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n \u003csummary\u003eWhat does the React Interface Schema look like?\u003c/summary\u003e\n \n It's a list of JSON objects, each delimited by a newline. Each object contains information about the element/component, props, and an `id` and `parentId`.\n\n The RIS **does not hardcode values**. It **binds** to properties of the `value` and has **built-in iterators** (with the `type` field), making it reusable and token-efficient (for arrays).\n\n Originally (pre-v0.2.x), the schema was a deep JSON tree. However, post-v0.2.x it was switched to a flat JSON list, as this allows for the UI to be built progressively (streamed).\n\n As such, the `id` and `parentId` fields are used to construct the tree as-you-go.\n\n Below is an example:\n\n ```json\n {\"id\":\"loop_1\", \"parentId\":\"root\", \"type\":\"__ForEach__\", \"props\":{\"source\":\"authors\"}}\n{\"id\":\"card_1\", \"parentId\":\"loop_1\", \"type\":\"div\", \"props\":{\"className\":\"card\"}, \"content\": {\"$bind\": \"$item.name\"}}\n ```\n\n To get a better understanding, or to implement your own parser, see the [spec](https://raw.githubusercontent.com/puffinsoft/syntux/refs/heads/master/src/templates/spec.md).\n\u003c/details\u003e\n\n---\n\n*syntux* is open source software, licensed under the [MIT](LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuffinsoft%2Fsyntux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpuffinsoft%2Fsyntux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuffinsoft%2Fsyntux/lists"}