Amplify Codegen UI

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

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

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

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

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

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

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.

const outputConfig = {
  outputPathDir: './src/ui-components',
};

Render Config

script

The script kind (JSX, TSX, etc.) of generated components.

Default: TSX Allowed: TSX, JSX, 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

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

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.

const renderConfig = {
  renderTypeDeclarations: true,
};

Contributing

CONTRIBUTING.md