https://github.com/aws-amplify/amplify-codegen-ui
Generate React components for use in an AWS Amplify project.
https://github.com/aws-amplify/amplify-codegen-ui
amplify aws aws-amplify javascript react
Last synced: 6 months ago
JSON representation
Generate React components for use in an AWS Amplify project.
- Host: GitHub
- URL: https://github.com/aws-amplify/amplify-codegen-ui
- Owner: aws-amplify
- License: apache-2.0
- Created: 2021-07-01T18:58:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-06-02T19:34:36.000Z (7 months ago)
- Last Synced: 2025-06-03T05:34:43.767Z (7 months ago)
- Topics: amplify, aws, aws-amplify, javascript, react
- Language: TypeScript
- Homepage:
- Size: 29.1 MB
- Stars: 30
- Watchers: 43
- Forks: 28
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
---
# Amplify Codegen UI
[](LICENSE)
[](https://discord.gg/jWVbPfC)
[](https://github.com/aws-amplify/amplify-codegen-ui/actions/workflows/check.yml)
[](https://circleci.com/gh/aws-amplify/amplify-codegen-ui/tree/main)
[](https://lgtm.com/projects/g/aws-amplify/amplify-codegen-ui/context:javascript)
[](https://codecov.io/gh/aws-amplify/amplify-codegen-ui)
[](https://github.com/aws-amplify/amplify-codegen-ui/issues?q=is%3Aissue+is%3Aopen+label%3Abug)
[](https://github.com/aws-amplify/amplify-codegen-ui/issues?q=is%3Aissue+label%3Afeature-request+is%3Aopen)
Generate React components for use in an AWS Amplify project.
## Usage
Amplify Codegen UI supports component generation in Node or a browser environment.
### Generate in Node
#### Components
```js
import {
AmplifyRenderer,
StudioTemplateRendererFactory,
StudioTemplateRendererManager,
} from '@aws-amplify/codegen-ui-react';
const renderConfig = {};
const outputConfig = {
outputPathDir: './src/ui-components';
};
const componentRendererFactory = new StudioTemplateRendererFactory(
(component) => new AmplifyRenderer(component, renderConfig),
);
const rendererManager = new StudioTemplateRendererManager(componentRendererFactory, outputConfig);
const component = {
id: '1234-5678-9010',
componentType: 'Text',
name: 'TextPrimitive',
properties: {
label: {
value: 'Hello world',
},
},
};
rendererManager.renderSchemaToTemplate(component);
```
#### Themes
```js
import {
ReactThemeStudioTemplateRenderer,
StudioTemplateRendererFactory,
StudioTemplateRendererManager,
} from '@aws-amplify/codegen-ui-react';
const renderConfig = {};
const outputConfig = {
outputPathDir: './src/ui-components';
};
const themeRendererFactory = new StudioTemplateRendererFactory(
(theme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
);
const themeRendererManager = new StudioTemplateRendererManager(themeRendererFactory, outputConfig);
const theme = {
id: '1234-5678-9010',
name: 'MyTheme',
values: [
{
key: 'tokens',
value: {
children: [
{
key: 'colors',
value: {
children: [
{
key: 'font',
value: {
children: [
{
key: 'primary',
value: {
children: [
{
key: 'value',
value: {
value: '#008080',
},
},
],
},
},
],
},
},
],
},
},
],
},
},
],
};
themeRendererManager.renderSchemaToTemplate(theme);
```
#### `index.js` File
```js
import {
ReactIndexStudioTemplateRenderer,
StudioTemplateRendererFactory,
StudioTemplateRendererManager,
} from '@aws-amplify/codegen-ui-react';
const renderConfig = {};
const outputConfig = {
outputPathDir: './src/ui-components',
};
const indexRendererFactory = new StudioTemplateRendererFactory(
(components) => new ReactIndexStudioTemplateRenderer(components, renderConfig),
);
const indexRendererManager = new StudioTemplateRendererManager(indexRendererFactory, outputConfig);
const components = [
{
id: '1234-5678-9010',
componentType: 'Text',
name: 'MyHelloWorld',
properties: {
label: {
value: 'Hello world!',
},
},
},
{
id: '1234-5678-9012',
componentType: 'Text',
name: 'MyCodegen',
properties: {
label: {
value: 'Codegen!',
},
},
},
];
indexRendererManager.renderSchemaToTemplate(components);
```
### Generate in Browser
When generating components in the browser, components will not be written to the file system.
#### Components
```js
import { AmplifyRenderer } from '@aws-amplify/codegen-ui-react';
const renderConfig = {};
const component = {
id: '1234-5678-9010',
componentType: 'Text',
name: 'TextPrimitive',
properties: {
label: {
value: 'Hello world',
},
},
};
const { importsText, compText } = new AmplifyRenderer(component, renderConfig).renderComponentOnly();
```
#### Themes
```js
import { ReactThemeStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';
const renderConfig = {};
const theme = {
id: '1234-5678-9010',
name: 'MyTheme',
values: [
{
key: 'tokens',
value: {
children: [
{
key: 'colors',
value: {
children: [
{
key: 'font',
value: {
children: [
{
key: 'primary',
value: {
children: [
{
key: 'value',
value: {
value: '#008080',
},
},
],
},
},
],
},
},
],
},
},
],
},
},
],
};
const { componentText } = new ReactThemeStudioTemplateRenderer(theme, renderConfig).renderComponent();
```
#### `index.js` File
```js
import { ReactIndexStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';
const renderConfig = {};
const components = [
{
id: '1234-5678-9010',
componentType: 'Text',
name: 'MyHelloWorld',
properties: {
label: {
value: 'Hello world!',
},
},
},
{
id: '1234-5678-9012',
componentType: 'Text',
name: 'MyCodegen',
properties: {
label: {
value: 'CodeGen',
},
},
},
];
const { componentText } = new ReactIndexStudioTemplateRenderer(components, renderConfig);
```
### Config
#### Output Config
##### outputPathDir (Required)
The directory generated components are written to.
```js
const outputConfig = {
outputPathDir: './src/ui-components',
};
```
#### Render Config
##### script
The script kind (JSX, TSX, etc.) of generated components.
Default: `TSX`
Allowed: `TSX`, `JSX`, `JS`
```js
import { ScriptKind } from '@aws-amplify/codegen-ui-react';
const renderConfig = {
script: ScriptKind.JSX,
};
```
##### target
The EcmaScript version (ES2016, ESNext, etc.) of generated components.
Default: `ES2015`
Allowed: `ES3`, `ES5`, `ES6`/`ES2015`, `ES2016`, `ES2017`, `ES2018`, `ES2019`, `ES2020`, `ES2021`, `ESNext`
```js
import { ScriptTarget } from '@aws-amplify/codegen-ui-react';
const renderConfig = {
target: ScriptTaget.ESNext,
};
```
##### module
The JavaScript module system of generated components.
Default: `CommonJS`
Allowed: `CommonJS`, `ESNext`
```js
import { ScriptTarget } from '@aws-amplify/codegen-ui-react';
const renderConfig = {
module: ModuleKind.ESNext,
};
```
##### renderTypeDeclarations
Generate the type declaration files (`.d.ts`) for components.
Default: `false`
Allowed: `false`, `true`
Rendering type declarations will negatively affect performance.
Only generate type declarations if necessary.
Not supported in browser environments.
```js
const renderConfig = {
renderTypeDeclarations: true,
};
```
## Contributing
[CONTRIBUTING.md](/CONTRIBUTING.md)