# Publish and share a template Create a reusable template and share it with the community. In this tutorial, you will create a template from scratch, test it locally, and then share it with others. By the end, you will know how to distribute templates via file, URL, GitHub, npm, and the template catalog. ## Create a template Start by scaffolding an empty template. Templates are defined using JSON5 and consist of a series of steps, called actions. Run the following command to generate one: ```sh croct create template --empty ``` This command generates a `template.json5` file in the current directory with the following structure: **template.json5** ```json { "$schema": "https://schema.croct.com/json/v1/template.json", "title": "My template", "description": "My template description", "actions": [ { "name": "print", "semantics": "info", "title": "Empty template", "message": "Edit this template to define your actions." } ] } ``` Edit the metadata and actions to define your template. > **Need inspiration?** > > Check out our [template repository](https://github.com/croct-tech/templates) for examples and ideas. ### Export from your account If you are working with components or experiences, the easiest way to create a template is by exporting an existing resource from your account. Run the following command: ```sh croct create template ``` The CLI will guide you through selecting the resource and then generate a template file in the current folder. To export it to a specific path, pass the desired location: ```sh croct create template path/to/my-template.json5 ``` ## Test your template After creating or exporting your template, test it locally to make sure everything works: ```sh croct use template.json5 ``` For the example template above, you should see this output: ![Template output](/assets/immersion/tutorials/template-publishing/template-output.png) ## Share your template Once your template is ready, there are several ways to share it depending on your needs. ### Share the file Send the `template.json5` file directly. Others can run it using: ```sh croct use template.json5 ``` This is perfect for quick sharing when there are no dependencies like images or code snippets. ### Share a URL You can host your template on any publicly accessible URL and use it like this: ```sh croct use https://templates.example.com/template.json5 ``` If you omit the file name, the CLI will look for `template.json` or `template.json5`, just like index files on websites: ```sh croct use https://templates.example.com ``` ### Share via GitHub Use a direct link to a template in a GitHub repository: ```sh croct use https://github.com/croct-tech/templates/blob/master/templates/nextjs/croct/template.json5 ``` This is ideal for versioning and collaboration. ## Make your template discoverable Help others find and use your template by making it discoverable through npm, GitHub, or the [template catalog](https://croct.com/templates). ### Associate with your package If your template complements a library or component, you can associate it with your npm package. Place the template file in the **root directory** of the GitHub repository associated with your package. This allows the CLI to discover it automatically. For example, if your package is `react-amazing-slider`, users can run: ```sh croct use npm://react-amazing-slider ``` The CLI will resolve the template using metadata from the npm registry and fetch it from the root of the linked repository. ### Publish on the catalog The best way to promote your template is by submitting it to the template catalog. It's browsed by thousands of developers monthly, and users can install your template with one click. Follow these steps to publish your template: 1. **Fork the repository** Go to the [templates repository](https://github.com/croct-tech/templates) and click the [**Fork**](https://github.com/croct-tech/templates/fork) button. 2. **Clone your fork** Run the following command to clone your forked repository replacing `` with your GitHub username: ```bash git clone https://github.com//templates.git ``` 3. **Update your template** Update your template file to use the catalog schema and add metadata: ```json { "$schema": "https://schema.croct.com/json/catalog-template.json", "metadata": { "id": "boilerplate/utility/example-launcher", "verified": true, "author": { "name": "Croct", "avatarUrl": "https://github.com/croct-tech.png", "websiteUrl": "https://croct.com" }, "categories": ["boilerplate/utility"], "sourceUrl": "...", "coverImageUrl": "...", "installationUrl": "croct://utils/example-launcher", "documentationUrl": "..." } } ``` 4. **Add the template to the catalog** Place your template in a subfolder inside the appropriate organization directory: ![Folder structure](/assets/immersion/tutorials/template-publishing/folder-structure.png) Use your company's domain (without `.com`, `.io`, etc.) for the folder name. 5. **Open a pull request** Commit your changes and push them to your forked repository. Then, go to the original repository and click the **Pull request** button. > **Note** > > Make sure to address any issues reported by our automated tests in the **Checks** tab of the pull request before requesting a review. Check the [GitHub documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request#creating-the-pull-request) for more information on how to create a pull request. ### Add a link to the catalog Once your template is available on the [template catalog](https://croct.com/templates), you can include a **Use template** button in your README to let users install it with a single click. #### General button Ideal for most templates, especially those that go beyond component schemas. **Markdown** ```md [![Use Template](https://croct.com/button)](https://croct.com/templates/boilerplate/starter/nextjs-croct) ``` **HTML** ```html Use Template ``` Preview: [![Use Template](https://croct.com/button)](https://croct.com/templates/boilerplate/starter/nextjs-croct) #### CMS button For templates whose primary purpose is to provide a schema for a component, consider using the CMS variant: **Markdown** ```md [![Use Template](https://croct.com/button?variant=cms)](https://croct.com/templates/boilerplate/starter/nextjs-croct) ``` **HTML** ```html Use Template ``` Preview: [![Use Template](https://croct.com/button?variant=cms)](https://croct.com/templates/boilerplate/starter/nextjs-croct)