{"id":29580049,"url":"https://github.com/aws-amplify/amplify-codegen-ui","last_synced_at":"2025-07-19T18:02:09.021Z","repository":{"id":37048933,"uuid":"382129678","full_name":"aws-amplify/amplify-codegen-ui","owner":"aws-amplify","description":"Generate React components for use in an AWS Amplify project.","archived":false,"fork":false,"pushed_at":"2025-06-02T19:34:36.000Z","size":30530,"stargazers_count":30,"open_issues_count":7,"forks_count":28,"subscribers_count":43,"default_branch":"main","last_synced_at":"2025-06-03T05:34:43.767Z","etag":null,"topics":["amplify","aws","aws-amplify","javascript","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aws-amplify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-01T18:58:52.000Z","updated_at":"2025-06-02T19:34:39.000Z","dependencies_parsed_at":"2023-10-14T19:34:25.576Z","dependency_job_id":"1794ed1f-1127-47fa-84b6-eb720ff8a000","html_url":"https://github.com/aws-amplify/amplify-codegen-ui","commit_stats":{"total_commits":707,"total_committers":38,"mean_commits":"18.605263157894736","dds":0.7609618104667609,"last_synced_commit":"de4dcf708436b0dfa1ae1d634844e5323364b7e0"},"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"purl":"pkg:github/aws-amplify/amplify-codegen-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-amplify%2Famplify-codegen-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-amplify%2Famplify-codegen-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-amplify%2Famplify-codegen-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-amplify%2Famplify-codegen-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aws-amplify","download_url":"https://codeload.github.com/aws-amplify/amplify-codegen-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aws-amplify%2Famplify-codegen-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263585722,"owners_count":23484484,"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":["amplify","aws","aws-amplify","javascript","react"],"created_at":"2025-07-19T18:01:29.128Z","updated_at":"2025-07-19T18:02:09.009Z","avatar_url":"https://github.com/aws-amplify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png\" alt=\"AWS Amplify\" width=\"225\"\u003e\n\n---\n\n# Amplify Codegen UI\n\n[![GitHub](https://img.shields.io/github/license/aws-amplify/amplify-codegen-ui)](LICENSE)\n[![Discord](https://img.shields.io/discord/308323056592486420?logo=discord)](https://discord.gg/jWVbPfC)\n[![Build](https://github.com/aws-amplify/amplify-codegen-ui/actions/workflows/check.yml/badge.svg)](https://github.com/aws-amplify/amplify-codegen-ui/actions/workflows/check.yml)\n[![CircleCI](https://circleci.com/gh/aws-amplify/amplify-codegen-ui/tree/main.svg?style=shield)](https://circleci.com/gh/aws-amplify/amplify-codegen-ui/tree/main)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/aws-amplify/amplify-codegen-ui.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/aws-amplify/amplify-codegen-ui/context:javascript)\n[![codecov](https://codecov.io/gh/aws-amplify/amplify-codegen-ui/branch/main/graph/badge.svg?token=opw1LYK6Jn)](https://codecov.io/gh/aws-amplify/amplify-codegen-ui)\n[![Open Bugs](https://img.shields.io/github/issues/aws-amplify/amplify-codegen-ui/bug?color=d73a4a\u0026label=bugs)](https://github.com/aws-amplify/amplify-codegen-ui/issues?q=is%3Aissue+is%3Aopen+label%3Abug)\n[![Feature Requests](https://img.shields.io/github/issues/aws-amplify/amplify-codegen-ui/feature-request?color=ff9001\u0026label=feature%20requests)](https://github.com/aws-amplify/amplify-codegen-ui/issues?q=is%3Aissue+label%3Afeature-request+is%3Aopen)\n\nGenerate React components for use in an AWS Amplify project.\n\n## Usage\n\nAmplify Codegen UI supports component generation in Node or a browser environment.\n\n### Generate in Node\n\n#### Components\n\n```js\nimport {\n  AmplifyRenderer,\n  StudioTemplateRendererFactory,\n  StudioTemplateRendererManager,\n} from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {};\nconst outputConfig = {\n  outputPathDir: './src/ui-components';\n};\n\nconst componentRendererFactory = new StudioTemplateRendererFactory(\n  (component) =\u003e new AmplifyRenderer(component, renderConfig),\n);\n\nconst rendererManager = new StudioTemplateRendererManager(componentRendererFactory, outputConfig);\n\nconst component = {\n  id: '1234-5678-9010',\n  componentType: 'Text',\n  name: 'TextPrimitive',\n  properties: {\n    label: {\n      value: 'Hello world',\n    },\n  },\n};\n\nrendererManager.renderSchemaToTemplate(component);\n```\n\n#### Themes\n\n```js\nimport {\n  ReactThemeStudioTemplateRenderer,\n  StudioTemplateRendererFactory,\n  StudioTemplateRendererManager,\n} from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {};\nconst outputConfig = {\n  outputPathDir: './src/ui-components';\n};\n\nconst themeRendererFactory = new StudioTemplateRendererFactory(\n  (theme) =\u003e new ReactThemeStudioTemplateRenderer(theme, renderConfig),\n);\n\nconst themeRendererManager = new StudioTemplateRendererManager(themeRendererFactory, outputConfig);\n\nconst theme = {\n  id: '1234-5678-9010',\n  name: 'MyTheme',\n  values: [\n    {\n      key: 'tokens',\n      value: {\n        children: [\n          {\n            key: 'colors',\n            value: {\n              children: [\n                {\n                  key: 'font',\n                  value: {\n                    children: [\n                      {\n                        key: 'primary',\n                        value: {\n                          children: [\n                            {\n                              key: 'value',\n                              value: {\n                                value: '#008080',\n                              },\n                            },\n                          ],\n                        },\n                      },\n                    ],\n                  },\n                },\n              ],\n            },\n          },\n        ],\n      },\n    },\n  ],\n};\n\nthemeRendererManager.renderSchemaToTemplate(theme);\n```\n\n#### `index.js` File\n\n```js\nimport {\n  ReactIndexStudioTemplateRenderer,\n  StudioTemplateRendererFactory,\n  StudioTemplateRendererManager,\n} from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {};\nconst outputConfig = {\n  outputPathDir: './src/ui-components',\n};\n\nconst indexRendererFactory = new StudioTemplateRendererFactory(\n  (components) =\u003e new ReactIndexStudioTemplateRenderer(components, renderConfig),\n);\n\nconst indexRendererManager = new StudioTemplateRendererManager(indexRendererFactory, outputConfig);\n\nconst components = [\n  {\n    id: '1234-5678-9010',\n    componentType: 'Text',\n    name: 'MyHelloWorld',\n    properties: {\n      label: {\n        value: 'Hello world!',\n      },\n    },\n  },\n  {\n    id: '1234-5678-9012',\n    componentType: 'Text',\n    name: 'MyCodegen',\n    properties: {\n      label: {\n        value: 'Codegen!',\n      },\n    },\n  },\n];\n\nindexRendererManager.renderSchemaToTemplate(components);\n```\n\n### Generate in Browser\n\nWhen generating components in the browser, components will not be written to the file system.\n\n#### Components\n\n```js\nimport { AmplifyRenderer } from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {};\n\nconst component = {\n  id: '1234-5678-9010',\n  componentType: 'Text',\n  name: 'TextPrimitive',\n  properties: {\n    label: {\n      value: 'Hello world',\n    },\n  },\n};\n\nconst { importsText, compText } = new AmplifyRenderer(component, renderConfig).renderComponentOnly();\n```\n\n#### Themes\n\n```js\nimport { ReactThemeStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {};\n\nconst theme = {\n  id: '1234-5678-9010',\n  name: 'MyTheme',\n  values: [\n    {\n      key: 'tokens',\n      value: {\n        children: [\n          {\n            key: 'colors',\n            value: {\n              children: [\n                {\n                  key: 'font',\n                  value: {\n                    children: [\n                      {\n                        key: 'primary',\n                        value: {\n                          children: [\n                            {\n                              key: 'value',\n                              value: {\n                                value: '#008080',\n                              },\n                            },\n                          ],\n                        },\n                      },\n                    ],\n                  },\n                },\n              ],\n            },\n          },\n        ],\n      },\n    },\n  ],\n};\n\nconst { componentText } = new ReactThemeStudioTemplateRenderer(theme, renderConfig).renderComponent();\n```\n\n#### `index.js` File\n\n```js\nimport { ReactIndexStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {};\nconst components = [\n  {\n    id: '1234-5678-9010',\n    componentType: 'Text',\n    name: 'MyHelloWorld',\n    properties: {\n      label: {\n        value: 'Hello world!',\n      },\n    },\n  },\n  {\n    id: '1234-5678-9012',\n    componentType: 'Text',\n    name: 'MyCodegen',\n    properties: {\n      label: {\n        value: 'CodeGen',\n      },\n    },\n  },\n];\n\nconst { componentText } = new ReactIndexStudioTemplateRenderer(components, renderConfig);\n```\n\n### Config\n\n#### Output Config\n\n##### outputPathDir (Required)\n\nThe directory generated components are written to.\n\n```js\nconst outputConfig = {\n  outputPathDir: './src/ui-components',\n};\n```\n\n#### Render Config\n\n##### script\n\nThe script kind (JSX, TSX, etc.) of generated components.\n\nDefault: `TSX`\nAllowed: `TSX`, `JSX`, `JS`\n\n```js\nimport { ScriptKind } from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {\n  script: ScriptKind.JSX,\n};\n```\n\n##### target\n\nThe EcmaScript version (ES2016, ESNext, etc.) of generated components.\n\nDefault: `ES2015`\nAllowed: `ES3`, `ES5`, `ES6`/`ES2015`, `ES2016`, `ES2017`, `ES2018`, `ES2019`, `ES2020`, `ES2021`, `ESNext`\n\n```js\nimport { ScriptTarget } from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {\n  target: ScriptTaget.ESNext,\n};\n```\n\n##### module\n\nThe JavaScript module system of generated components.\n\nDefault: `CommonJS`\nAllowed: `CommonJS`, `ESNext`\n\n```js\nimport { ScriptTarget } from '@aws-amplify/codegen-ui-react';\n\nconst renderConfig = {\n  module: ModuleKind.ESNext,\n};\n```\n\n##### renderTypeDeclarations\n\nGenerate the type declaration files (`.d.ts`) for components.\n\nDefault: `false`\nAllowed: `false`, `true`\n\nRendering type declarations will negatively affect performance.\nOnly generate type declarations if necessary.\n\nNot supported in browser environments.\n\n```js\nconst renderConfig = {\n  renderTypeDeclarations: true,\n};\n```\n\n## Contributing\n\n[CONTRIBUTING.md](/CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faws-amplify%2Famplify-codegen-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faws-amplify%2Famplify-codegen-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faws-amplify%2Famplify-codegen-ui/lists"}