templates.html

---
title: Templates
layout: table
sectionid: collection-index-templates
---

<h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Templates</h1>
<p style="margin-left: auto;margin-right: auto;">
    This table contains all official and community-supported <a href="implementors/templates/">Dev Container Templates</a>
    known at the time of crawling <a href="collections">each registered collection</a>. This list is continuously 
    updated with the latest available Template information. See the <a href="https://github.com/devcontainers/template-starter">
    Template quick start repository</a> to add your own!
    <br><br>
    Templates listed here will be presented in the UX of <a href="supporting">supporting tools</a>.
    <br><br>
    Please note that if you need to report a Template, you should do so through the registry hosting the Template.
</p>

<p>
    To add your own collection to this list, please create a PR editing <a
        href="https://github.com/devcontainers/devcontainers.github.io/blob/gh-pages/_data/collection-index.yml">this
        yaml file</a>.
</p>

<input type="text" id="searchInput" placeholder="Search">
<br>
<br>

<table id="collectionTable" class="tg">
    <tr>
        <td class="tg-0lax"><b>Template Name</b></b></td>
        <td class="tg-0lax"><b>Maintainer</b></td>
        <td class="tg-0lax"><b>Reference</b></td>
        <td class="tg-0lax"><b>Latest Version</b></td>
    </tr>
    
    {% for c in site.data.devcontainer-index.collections %}
    {% for f in c.templates %}
    <tr>
        <td class="tg-0lax"><a rel="nofollow" href="{{ f.documentationURL | strip_html }}">{{ f.name | strip_html }}</a>
        </td>
        <td class="tg-0lax">{{ c.sourceInformation.maintainer | strip_html }}</td>
        <td class="tg-0lax"><code>{{ f.id | strip_html  }}:{{ f.version | strip_html }}</code></td>
        <td class="tg-0lax"><code>{{ f.version | strip_html  }}</code></td>
    </tr>
    {% endfor %}
    
    {% endfor %}
</table>

<script>
    const searchInput = document.getElementById('searchInput');
    const collectionTable = document.getElementById('collectionTable');
    const rows = collectionTable.getElementsByTagName('tr');

    searchInput.addEventListener('input', function () {
        const searchValue = searchInput.value.toLowerCase();

        for (let i = 1; i < rows.length; i++) {
            const name = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
            const maintainer = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();

            if (name.includes(searchValue) || maintainer.includes(searchValue)) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    });
</script>