Annex is a modern UI for Typesense

Annex provides a clean, open source (MIT licensed), intuitive UI for Typesense powered search. It's easy to integrate and works "out of the box" with Typesense integrations.

Check out the demos below or head over to the GitHub repo: https://github.com/AnnexLabs/AnnexUI

Quick CDN embed

<script type="text/javascript" 
        src="https://cdn.jsdelivr.net/gh/AnnexLabs/[email protected]/dist/bundle.min.js" 
        defer></script>

Inline layout (⌘b)

Copy link

This demo shows Annex running inside an HTMLElement container. It will resize to fit that container, including on mobile and responsive devices.

Search for "apple" Clear search Disable Enable View code

Modal layout (⌘k)

Copy link

This demo shows Annex running inside a modal, which is automatically drawn. Searches and interactions are constrained to that modal, and it's state is preserved after hiding.

Show Search for "apple" Disable Enable View code

Left panel layout (⌘i)

Copy link

This demo shows Annex running inside a panel, affixed to the left side of the viewport. Similarily, interactions are constrained to that panel and state is preserved after hiding.

Show Search for "apple" Disable Enable View code

Right panel layout (⌘o)

Copy link

This demo shows Annex running inside a panel, affixed to the right side of the viewport. Similarily, interactions are constrained to that panel and state is preserved after hiding.

Show Search for "apple" Disable Enable View code

Inline layout (dark mode)

Copy link

This demo shows Annex running inside an HTMLElement container. It has the "dark mode" color scheme set.

By default, the "dark mode" color scheme will be applied when Annex determines it should be, however developers can override this to enforce either the light or dark color scheme at all times.

Search for "apple" Clear search Disable Enable View code

Multiple modal layouts (stacked; ⌘s & ⌘d)(stacked)

Copy link

This demo shows two modal-layout web components showing at the same time. Toggling between them can be facilitated through their respective keyboard-shortcuts (on non-touch devices).

This can be useful if you want to allow users to search different data-sets at the same time.

Search for "apple" (multiple) View code

Inline layout (using sku-v0.1.0 templates)

Copy link

This demo shows Annex running inline and using default templates that have been pre-coded to adhere to a specific data schema (sku-v0.1.0).

It this case, the data schema being adhered to can be found here: https://github.com/AnnexLabs/AnnexUI/blob/v0.1.14-stable/src/data/schemas/sku/v0.1.0.json

A mutator function is also defined to "massage" the existing data to that schema.

View code

Built for Typesense by Oliver Nassar