Character Viewer

Interactive character and glyph explorer

An interactive character/glyph explorer.

<fontdue-character-viewer
collection-slug="ibm-plex"
></fontdue-character-viewer>
import CharacterViewer from "fontdue-js/CharacterViewer";
<CharacterViewer collectionSlug="ibm-plex" />

On a server-rendered framework, preload the data in your loader with loadCharacterViewerQuery and pass it as preloadedQuery in place of an identifier, see lazy versus preloaded:

import CharacterViewer, { loadCharacterViewerQuery } from "fontdue-js/CharacterViewer";
const characters = await loadCharacterViewerQuery({ collectionSlug: "ibm-plex" });
<CharacterViewer preloadedQuery={characters} />
Property Description Type
collection-id or collection-slug Identifier for collection string Required
Prop Description Type
collectionId or collectionSlug Identifier for the collection. Required unless you pass preloadedQuery. string
preloadedQuery Server-preloaded data from loadCharacterViewerQuery, passed instead of an identifier. object