features.html

---
title: Features
layout: table
sectionid: collection-index-features
---

<h1 style="margin-left: auto;margin-right: auto;">Available Dev Container Features</h1>
<p style="margin-left: auto;margin-right: auto;">
    This table contains all official and community-supported <a href="implementors/features/">Dev Container Features</a>
    known at the time of crawling <a href="collections">each registered collection</a>. This list is continuously
    updated with the latest available feature information. See the <a
        href="https://github.com/devcontainers/feature-template">
        Feature quick start repository</a> to add your own!
    <br><br>
    <a href="implementors/features#referencing-a-feature">Referencing a Feature</a> below can be done in the "features"
    section of a devcontainer.json.
    <br><br>
    Please note that if you need to report a Feature, you should do so through the registry hosting the Feature.
</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>Feature 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.features %}
    {% if f.deprecated != true %}
    <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.majorVersion | strip_html }}</code></td>
        <td class="tg-0lax"><code>{{ f.version | strip_html  }}</code></td>
    </tr>
    {% endif %}
    {% 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();
            const repository = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();

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