---
title: "Extensions"
description: "Add SSE, WebSockets, file downloads, and more."
thumbnail: "docs/extensions.svg"
---

import { getFolder } from '../../lib/content';

export const folder = await getFolder('extensions');
export const CATEGORY_ORDER = ['Networking', 'Performance', 'UX', 'Swap behaviors', 'Compatibility', 'Security'];
export const grouped = CATEGORY_ORDER.map(category => ({
    category,
    slug: category.toLowerCase().replace(/\s+/g, '-'),
    items: folder.files.filter(f => f.frontmatter.category === category).map(f => ({
        title: f.frontmatter.title,
        url: f.url,
        description: f.frontmatter.description,
        icon: f.frontmatter.icon,
    })),
})).filter(g => g.items.length > 0);

<div class="not-prose mb-6">
    <input
        type="text"
        placeholder="Search extensions..."
        autocomplete="off"
        class="w-full px-3 py-2 text-sm border border-neutral-200 dark:border-neutral-800 rounded-md bg-white dark:bg-neutral-900 text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-300/50 dark:focus:ring-neutral-600/50 focus:border-neutral-300 dark:focus:border-neutral-600"
        _="install ActiveSearch"
    />
</div>

{grouped.map(group => (
<section role="group">

<h2 id={group.slug}>{group.category}</h2>

<table>
    <tbody>
        {group.items.map(item => (
            <tr class="stretch-link" data-filter={`${item.title} ${item.description || ''}`.toLowerCase()}>
                <td>
                    {item.icon && <i class={`${item.icon} size-5 inline-block align-middle mr-5`}></i>}
                    <span class="inline-block align-middle">
                        <a href={item.url}><code>{item.title}</code></a>
                        {item.description && <span class="block sm:hidden text-[0.8125em] text-neutral-650 dark:text-neutral-350 mt-0.5 pl-[6px]">{item.description}</span>}
                    </span>
                </td>
                <td class="hidden sm:table-cell text-neutral-650 dark:text-neutral-350">{item.description || ''}</td>
            </tr>
        ))}
    </tbody>
</table>

</section>
))}
