# Add Template

If you'd like to add a template to Dyad Hub, follow these steps.

Dyad includes a few [official templates](/content/docs/templates/index.html), but if you'd like to propose a new one, please follow the steps below.

Dyad only supports JavaScript-based templates. See [FAQ](/content/docs/faq#other-languages/index.html) for more context.

## [1. Create a GitHub repo](/content/docs/templates/add-template#1-create-a-github-repo/index.html)

Start by creating a GitHub repository that will serve as your template. You can refer to the [Next.js template repo](https://github.com/dyad-sh/nextjs-template) as an example.

## [2. Define `AI_RULES.md`](/content/docs/templates/add-template#2-define-ai_rulesmd/index.html)

[`AI_RULES.md`](/content/docs/guides/ai-rules/index.html) provides system instructions to the AI. A good rules file should describe the tech stack and architecture of the codebase.

If you [import the template](/content/docs/guides/importing#ai-rules/index.html) into Dyad, it will automatically generate an `AI_RULES.md` for you. You can use the generated file or write your own from scratch.

## [3. (Optional) Support Select UI to Edit](/content/docs/templates/add-template#3-optional-support-select-ui-to-edit/index.html)

If you'd like to support [Select UI to Edit](/content/docs/releases/0.8.0)—a powerful feature that lets users edit specific UI components—you’ll need to tag elements during the compilation step.

For React or Next.js templates, use one of the following:

- [Next.js Component Tagger](https://github.com/dyad-sh/dyad/tree/main/packages/%40dyad-sh/nextjs-webpack-component-tagger)
- [React/Vite Component Tagger](https://github.com/dyad-sh/dyad/tree/main/packages/%40dyad-sh/react-vite-component-tagger)

If you're using another tech stack, you'll need to create your own compilation transform. This can be complex, but remember—this step is optional. Your template will still work without this feature.

## [4. Submit Your Template](/content/docs/templates/add-template#4-submit-your-template/index.html)

Once your template is ready, submit it by creating a [GitHub issue](https://github.com/dyad-sh/dyad/issues/new?template=add_template.md). We’ll review it and provide feedback before adding it to Dyad Hub.

Thanks for contributing!

[Portal template (experimental)\ 
\ 
Portal template shows Neon DB, Payload CMS and Next.js working together in a simple online store.](/content/docs/templates/portal/index.html) [GitHub\ 
\ 
Learn how to sync your code to GitHub](/content/docs/integrations/github/index.html)