# Use the Code Snippets Section The Code Snippets section helps you add reusable code examples to technical documentation. Use it when readers need a practical example alongside an explanation, such as a component usage pattern, configuration example, or integration sample. ## Overview Code examples make technical documentation easier to apply. Instead of asking readers to translate a written description into their own implementation, you can provide a snippet they can review, copy, and adapt to their project. In Atloria, you work with code examples from the project’s **Technical Docs** area. The available actions, including **Add code examples**, let you add examples where they are most useful in the documentation. Use snippets to support explanations of application features, technical entities, relationships, and generated documentation sections. The Code Snippets section is most valuable when the example is reusable. Keep each example focused on one task so readers can understand what it demonstrates without having to remove unrelated code. > 📷 _Screenshot pending: The Technical Docs area showing the Add code examples action._ ## Prerequisites Before adding code examples, make sure you have the following: - Access to the relevant project in Atloria. - A technical documentation area available through **Technical Docs**. - A code example that supports the topic being documented. - A clear purpose for the example, such as demonstrating a UI component, a service interaction, a data model query, or an API implementation. - Any surrounding explanation needed to help readers understand when to use the example. ## Step-by-Step Instructions 1. Open the project that contains the documentation you want to update. 2. Select **Technical Docs** from the project documentation options. 3. Open the technical documentation topic or section where the code example belongs. 4. Select **Add code examples**. 5. Add an example that demonstrates one specific task or concept. 6. Place the example near the explanation it supports. 7. Review the example to confirm that it matches the terminology used in the surrounding technical documentation. 8. Add a short explanation before or after the example to tell readers what the code demonstrates. 9. Use the example to clarify relevant relationships, such as when one component **RENDERS** another component, when a component **USES HOOK**, or when a service **CALLS API** functionality. 10. Select **Generate section** if you are generating or completing the surrounding documentation section. 11. Review the generated section to make sure the code example remains relevant to the topic. 12. Repeat **Add code examples** for other technical topics that need their own focused examples. > 📷 _Screenshot pending: A technical documentation section with the Add code examples and Generate section actions._ ## Tips and Best Practices - Use one example for one purpose. For example, do not combine component rendering, state management, API calls, and configuration setup in a single snippet unless all are necessary to understand the same workflow. - Add examples where readers need them. A snippet is most useful immediately after the explanation of the feature, entity, or relationship it illustrates. - Match the example to the documentation category. For frontend documentation, show a focused component or hook example. For backend documentation, use an example that supports a service, API implementation, or model query. For configuration documentation, show only the configuration needed for the documented outcome. - Keep examples reusable. Avoid details that are specific to an unrelated feature or temporary scenario. Readers should be able to adapt the example without first removing large amounts of unrelated content. - Explain relationship context. When an example shows one technical entity interacting with another, describe the relationship in plain language. For example, explain that a component renders another component, a component uses a hook, or a service depends on another service. - Review examples after generating documentation. Generated technical content can provide surrounding context, but you should confirm that each code example still supports the section’s final topic and wording. - Use **Add code examples** instead of relying only on descriptive text when implementation details are important. Written explanations describe intent; snippets show the practical structure readers can reuse. ## Related Pages - [Technical Docs](#) - [Generate Technical Documentation](#) - [Use the User Docs Section](#) - [Export Documentation](#) - [Import Existing Documentation](#) ## Troubleshooting ### You cannot find the **Add code examples** action Open the project’s **Technical Docs** area first. The code-example action is intended for technical documentation rather than general user documentation. If you are viewing **User Docs** or **📋 User Manuals**, switch to **Technical Docs**. ### The example does not fit the generated section Review the topic of the section before keeping the example. If the snippet demonstrates a different feature or relationship, move it to a more relevant section or create a separate section with **Generate section**. ### Readers do not understand why the code example is included Add a short explanation that identifies the task the example solves and the relationship it demonstrates. For example, state whether the example shows a component rendering another component, a hook being used, or a service calling an API.