CopyGlyph

Het is een van de kleinste vragen op het web en tegelijk een van de meest gestelde. Iemand typt een rapport en heeft het graden-teken nodig. Iemand zet een pijl in een stappenplan. Iemand wil een vinkje in een spreadsheetcel in plaats van een plaatje. Het antwoord is één teken lang, maar de weg ernaartoe is dat zelden. De sites die in deze niche bovenaan staan laten het teken zien tussen advertentieblokken door, vragen om cookie-toestemming voordat je iets ziet, en laten je vervolgens gokken of wat je kopieerde wel het juiste karakter was.

Wat daar meestal mist, is context. Een symbool is zelden alleen een vorm. Het heeft een codepunt dat je in documentatie nodig hebt, een HTML-entity die je in een webpagina zet, een CSS-escape voor een pseudo-element, soms een alt-code als je het op Windows wilt typen, en een reeks bytes als je debugt waarom het ergens als vraagteken landt. Die informatie staat op de meeste sites verspreid, of ze laten het weg.

We hebben CopyGlyph daarom niet opgezet als een verzameling knopjes, maar als een referentie. De belofte is in één zin samen te vatten: de schoonste one-click referentie voor kopieerbare symbolen en speciale tekens, waarbij een glyph niet alleen zijn vorm meekrijgt maar ook zijn codepunt, entity en CSS. Waar een alt-code of een gebruiksnotitie bestaat, staat die erbij; waar die niet bestaat, blijft het vak weg in plaats van dat er iets wordt ingevuld. Klikken en plakken is de eerste seconde. De pagina eronder is er voor de vraag die daarna komt.

De visuele richting stond vast voordat er een regel CSS lag: een typografische letterproef. Warm off-white papier (#f7f4ef), bijna-zwarte inkt met een warme ondertoon (#14130f), één emerald accent (#059669), grote glyphs en een strak raster. Geen kleurexplosie, geen kaartjes met slagschaduw, geen iconen die het onderwerp na-apen. De reden is inhoudelijk: dit is een site over tekens, dus het teken zelf hoort het grootste element op de pagina te zijn en al het andere wijkt eromheen.

Die keuze is doorgevoerd tot in de details. De site zet de system font stack in en haalt geen fonts van buiten, dus geen font-CDN en geen render-blokkerende resource. Dat scheelt niet alleen snelheid: je ziet een glyph zoals hij er op jouw apparaat werkelijk uitziet, en dat is nu juist de informatie die je zoekt als je twijfelt of een teken overleeft in de context waar je het plakt. De code-representaties staan in echte tabelrijen met een rijkop, niet in gestylede divs, zodat schermlezers en answer engines de paren zonder omweg kunnen lezen.

Het hele systeem is met de hand geschreven: eigen CSS met design-tokens, inclusief een volledig donker thema dat via een kleine inline-script in de layout wordt gezet, zodat je bij het laden geen witte flits krijgt voordat het thema aanslaat. Er zit geen CSS-framework en geen UI-bibliotheek in het project. De runtime-afhankelijkheden zijn Next, React en React DOM. Meer niet. Dat is geen sportprestatie om de sportprestatie, het is wat je overhoudt als je een merk voert dat niet uit een template komt.

De kern van de site is één databestand, met per symbool het teken, het decimale codepunt, de naam, de categorieën, de zoekwoorden en optioneel een alt-code en een gebruiksnotitie. Wat een bezoeker verder ziet, wordt daaruit berekend door één afleidingsfunctie: de slug (het codepunt in hex, dus u2192), de U+-notatie, de decimale en hexadecimale entity, de CSS-content-escape, de JavaScript-escape, de UTF-8-bytes en de UTF-16-units. Een nieuw symbool toevoegen komt daardoor neer op één data-entry, waarna de detailpagina, de API, de sitemap-regel en de interne links vanzelf ontstaan. De dataset telt 418 ingevoerde regels; twee tekens komen in meer dan één variant voor en worden op slug ontdubbeld, waarbij simpelweg de eerste regel in het bestand blijft staan en er 416 symbolen overblijven die daadwerkelijk een pagina krijgen.

Dat onderscheid tussen afgeleid en ingevoerd is bewust. De codes volgen rechtstreeks uit het codepunt en gelden dus voor ieder teken in de set. De alt-code en de gebruiksnotitie zijn optionele velden, juist omdat ze niet bij elk teken bestaan of niet bij elk teken iets toevoegen: 52 van de 416 symbolen hebben een alt-code, 43 een notitie. De pagina toont ze waar ze er zijn en zwijgt waar ze er niet zijn, in plaats van een leeg vakje of een verzonnen waarde te tonen. Bij de named entities hebben we om dezelfde reden niet de volledige tabel van ongeveer 2000 HTML-entiteiten meegenomen, maar een gecureerde set, met de redenering erbij: het numerieke alternatief staat er sowieso bij en dat werkt in elke browser die de tabel niet kent.

Van de 416 symbolen zijn er 41 gemarkeerd als veelgevraagd. Dat label doet drie dingen: het geeft de pagina een hogere prioriteit in de sitemap, het zet het teken in een 'meest opgezocht'-blok op de categoriepagina, en het vult de gerelateerde links onder een symboolpagina aan wanneer de categorie zelf te klein is om er acht te leveren. Dat blok staat niet bovenaan, en dat is een keuze: de categoriepagina opent na de hero meteen met het volledige raster van alle tekens in die categorie, want wie op een categorie klikt wil de tekens zien en niet eerst een voorselectie. Pas onder dat raster volgt een compacte rij tekstlinks naar de veelgevraagde exemplaren, en daaronder de FAQ. Wat het label niet doet, is de detailpagina anders maken. Elk teken krijgt dezelfde opbouw en dezelfde volwaardige pagina, of het nu het hartje is of een box-drawing-karakter. Het label stuurt waar we de aandacht naartoe leiden, niet hoe goed de pagina eronder is, en dat onderscheid zit in de data en niet in losse uitzonderingen in de code.

CopyGlyph draait op Next.js 16 met de App Router, React 19 en TypeScript in strict mode. De 437 pagina's worden bij de build voorgerenderd. De 428 pagina's op de twee dynamische routes (416 symboolpagina's en 12 categorie-hubs) komen uit generateStaticParams; de negen vaste pagina's (home, categories, reference, api-docs, embed, about, contact, privacy en terms) zijn gewone statische routes die daar geen parameters voor nodig hebben. Bij beide dynamische routes staat dynamicParams uit, wat betekent dat de set eindig is en een onbekende slug een echte 404 oplevert in plaats van een lege pagina die op verzoek wordt gerenderd. Er is geen server, geen database en geen CMS.

Voor de bezoeker vertaalt dat zich in twee dingen. Snelheid, omdat een pagina niets meer is dan HTML die klaarligt op een CDN, zonder font-request en zonder third-party script. En privacy, omdat het gebruik van de tool zelf in de browser gebeurt. De zoekfunctie filtert een compacte index die al in de pagina zit, en het kopiëren schrijft rechtstreeks naar het klembord via de clipboard-API, met een fallback voor oudere contexten. Zoeken en kopiëren doen daardoor geen netwerkcall: wat je zoekt en wat je kopieert wordt nergens opgeslagen of gelogd, en de enige waarde die op je apparaat blijft staan is je licht- of donkervoorkeur. De ene plek waar wel iets de deur uit gaat is het contactformulier, dat je bericht naar een gedeeld endpoint post op het moment dat jij zelf op verzenden drukt.

Ook de advertentieruimte is met dat uitgangspunt gebouwd. De ad-component rendert niets zolang de betreffende environment-variabele niet aanstaat, dus er wordt geen third-party code geladen en er is geen layoutverschuiving voor iets wat er nog niet is. Dezelfde lijn geldt voor de consent-melding, die op dit moment een placeholder is die niets toont en in de code vermeldt dat er een gecertificeerde CMP voor in de plaats moet voordat er advertenties live gaan. Als er ooit een netwerk komt, is de plek gereserveerd en staat opgeschreven wat er dan eerst moet gebeuren. Tot die tijd is de pagina gewoon de pagina.

De routes hebben eigen metadata met een canonical, en daar zit meer denkwerk in dan het klinkt. Er zitten twee clamp-functies in de metadata-laag die tekst op een woordgrens afkappen. De titel wordt afgerekend tegen een budget van 48 tekens, omdat de layout er nog een merk-achtervoegsel achter plakt en de gerenderde regel zo onder de 60 blijft; de description wordt op 155 gehouden. Bij een dataset waarin sommige Unicode-namen absurd lang zijn, is dat het verschil tussen een nette SERP-regel en een zin die halverwege ophoudt. De symboolpagina probeert daarbij eerst de titel met codepunt, valt dan terug op de korte vorm, en pas als ook die niet past wordt de naam zelf ingekort. JSON-LD wordt per pagina samengesteld als één graph, met een breadcrumb op elke route en daarnaast WebApplication en FAQPage waar die van toepassing zijn. Verder staan er een sitemap, een robots-route, een llms.txt voor answer engines en OG-kaarten die met CSS-vormen worden getekend in plaats van met glyphs, zodat de deelafbeelding van een symbolensite niet afhankelijk is van de fontdekking van de renderer.

Het programmatische deel van de site is waar de meeste zorg in zit. Honderden long-tail pagina's uit één dataset genereren is technisch triviaal en redactioneel het gevaarlijkste wat je kunt doen, want je krijgt vierhonderd keer dezelfde zin met een ander woord erin. Daarom kiest de symboolpagina deterministisch uit zeven verschillende intro-vormen, en vult een context-map per categorie een eigen gebruikscontext in, zodat een pijl over stroomschema's en stappenplannen praat en een valutateken over prijzen en facturen. Die variatie is uitgebreid van drie naar zeven vormen op het moment dat de dataset groot genoeg werd om de herhaling zichtbaar te maken.

Wat er niet in zit, is net zo bepalend. De sitemap zet bewust geen lastModified, met de redenering in de code erbij: elke URL stempelen met de builddatum leert crawlers om het signaal te negeren. Er is één subtiele link naar het bredere netwerk van gratis tools, geen link-wheel. En de huisregels in de README laten weinig ruimte: geen em-dashes in proza, alleen fictieve voorbeeldnamen, Engelse copy, en geen AI-features.

De eerste commit dateert van 2 juli 2026. Sindsdien is de site gegroeid naar 416 symbolen in 12 categorieën, met drie eigen controles die bij een release horen. De build genereert eerst de statische API en de widget, daarna controleert het crawl-script dat er geen weespagina's en geen gebroken interne links zijn, en valideert het schema-script de JSON-LD-blokken in de gebouwde HTML. Er staat geen CI-pijplijn omheen die dat afdwingt; het is een huisregel die in de README staat als voorwaarde en niet als suggestie, en die we onszelf opleggen. Voor een site van deze omvang is dat een bewuste afweging: de discipline zit in het proces, en de dag dat dat gaat schuren is de dag dat het in een pijplijn hoort.

Rond de kern zijn een paar dingen gebouwd die de site verder dragen dan de eigen pagina's. Er is een reference-pagina met alle glyphs op één scherm, bedoeld als bladwijzer. Er is een JSON-API met een bestand voor de hele set, een per symbool en een voor de categorieën, die bij elke build opnieuw uit dezelfde dataset wordt gegenereerd, zodat er geen tweede bron is die achter kan gaan lopen. En er is een zelfstandige embeddable picker van zo'n 32 KB, zonder externe scripts, die andere sites met een iframe-snippet kunnen plaatsen en die net als de site zelf het zoeken en kopiëren in de browser van de bezoeker afhandelt.

Voor een opdrachtgever is dit vooral een steekproef. Het merk, het design-systeem, de datamodellering, de statische architectuur, de metadata en de eigen kwaliteitschecks komen uit hetzelfde huis en worden door datzelfde huis onderhouden. CopyGlyph is één van de 28 organische tool-sites die we op die manier bouwen. Ze zijn jong, ze groeien op eigen kracht, en ze laten zien hoe we werken als niemand meekijkt.