Is it possible to generate components with custom templates in RedwoodJS?

Get Help and Help Others
1

RedwoodJS makes it easy to generate scaffold code using yarn rw generate. However, when creating components and pages on the frontend, I’d like to generate them with custom code templates. For example, something like:

yarn rw generate component MyComponentName MyCustomTemplate

In this scenario, MyCustomTemplate would be a personalized component that my team can view in a Storybook setup that I host. This approach is similar to how shadcn/ui enables the use of pre-built components as a foundation, rather than depending on npm libraries where the underlying code isn’t easily accessible.

Does RedwoodJS support generating components with custom templates like this?

2

It is possible to customise templates that Redwood uses to generate components and other types of files as well. Please see here.

1 Like
3

@iam Thanks for the info, but that’s not quite what I meant. With commands like:

yarn rw setup generator page           # generate a customizable template for the page
yarn rw setup generator component      # generate a customizable template for the component
yarn rw setup generator layout         # generate a customizable template for the layout
yarn rw setup generator cell           # generate a customizable template for the cell

I can only create a single customizable template for each type (page, component, layout, cell). My goal is to have a central Storybook repository where developers can view multiple pre-built components and use RedwoodJS commands to scaffold these components in their projects.

The key difference is that I want to offer multiple templates for components or pages, allowing the application developer to choose a specific template when generating code with yarn rw generate x, rather than being limited to just one global template per type.

4

You could use the generate script option where you can write some custom code to generate the component you want.

You could pass in arguments for the component type or name or other options.

See Command Line Interface | RedwoodJS Docs

You can then run via yarn rw exec

Or add a script shortcut in package.json to make it easy to run.

For example, I often have a script that’s converts my readme markdown into an AboutPage tsx.

You could name your script generate-my-component

And “yarn rw exec generate-my-component FancyComponent”

1 Like