The title of the page

` of the body, like this: {% code title="/index.HTML (rendered by Frontity)" %} ```markup ...

``` {% endcode %} **Frontity** uses that `

` to inject the roots of all the packages that are installed: {% code title="/index.HTML (rendered by Frontity)" %} ```jsx ...

``` {% endcode %} Most of the time only your `theme` will export a **root**, but if any other package needs something in the DOM, it can include it also. For example, let's imagine a *ShareModal* package that has a modal like this: ![](https://frontity.org/wp-content/uploads/2021/04//screenshot-blog-mobile-share.jpg) This package can export the React elements it needs in its **root** and expose an action like `actions.share.openModal()` to interact with the theme. The **root** could be something like this: {% code title="/packages/my-share-modal-package/src/components/index.js" %} ```jsx const ShareRoot = ({ state }) => state.share.isModalOpen && ; export default ShareRoot; ``` {% endcode %} And the rest of the package something like this: {% code title="/packages/my-share-modal-package/src/index.js" %} ```javascript import ShareRoot from "./components/"; export default { roots: { share: ShareRoot }, state: { share: { isModalOpen: false } }, actions: { share: { openModal: ({ state }) => { state.share.isModalOpen = true; }, closeModal: ({ state }) => { state.share.isModalOpen = false; } } } } ``` {% endcode %} Then the only thing the theme would have to do if they want to include share functionality is to check if there's a `share` package and if there is, use its `actions.share.openModal()` action when appropriate. For example in these buttons: ![](https://frontity.org/wp-content/uploads/2021/04//screenshot-mobile-share.jpg) I hope you're starting to see how extensibility works in **Frontity**, but don't worry too much now, we'll talk in more detail later. By the way, **Frontity** has an API to modify the `` element inside React using the `` component like this: ```jsx import { Head } from "frontity"; const MyPackage = () => ( The title of the page ); ``` So even though **Frontity** only allows packages to insert React nodes in the `

` of the body, they can also modify the `` by adding tags inside a ``. For a more detailed explanation you can check [Head page](broken://pages/-M3z_PfNSKt4vGA-7_6t). {% hint style="info" %} If you still have any questions about Roots in Frontity, please check out the [**community forum**](https://community.frontity.org), which is packed full of answers and solutions to all sorts of Frontity questions. If you don't find what you're looking for, feel free to start a new post. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gitbook-docs.frontity.org/learning-frontity/roots.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.