I had briefly mentioned earlier in this docs about this feature of the templates functionality of Cull Front. Let me explain this in detail.
Often, you don't want to pick up the template files verbatim and use exactly the same content in your HTML build. You may want to modify some part of it before it goes into the eventual HTML.
Here is an example of a navigation bar from Bulma CSS. Refer this link: https://bulma.io/documentation/components/navbar/
Notice in that Bulma CSS, they have used a div whose ID is "navbarBasicExample" which actually describes the links which the nav bar handles. These are for "Home", "Documentation" and "More" ... and then the "More" link further opens up a sub-menu with these links "About", "Jobs", "Contact", "Report an issue"
Now; of course, that would not be the case in your specific HTML build!
So instead of hard-coding all those links into the template, you can insert this magic string:
!=!<elementID>
This is to be done just before the "navbarBasicExample" div; and you should remove that div from the template.
I have shown this Bulma example below. Instead of removing the original div for "navbarBasicExample" here I have just commented it out. And above that I wrote this:
!=!MyNavigation
So what Cull Front will now do is to look for the fragment definition for an element whose id is "MyNavigation" in the Tree file (the 1st of the four specified for a build) and then just-in-time, it will construct the HTML fragment which would get inserted in place of that magic string.
Now; in your build, there may not be actually an element whose ID is "MyNavigation" defined in the "Elements" file (the 2nd file needed for the build) In that case, Cull Front will develop the fragment for the list of children specified in the tree file. But if you do define such an element make sure it is a container element such as <div> etc.
In short, your job would now reduce to only the specific differences in the HTML which needs to be inserted just-in-time.
Note that Magic Insertions happen after the first two files are loaded, but before the HTMX and AlpineJS files are processed. So you can even insert HTMX and AlpineJS even into elements written in the template (or ones inserted magically)