WordBench

Tekstgereedschap is een van de oudste categorieën op het web en tegelijk een van de slechtst onderhouden. Zoek op 'word counter' of 'case converter' en je krijgt pagina's die nog staan te schuiven op het moment dat je ze al ziet, waar het invoerveld wordt ingesloten door advertentieblokken, en waar een cookiebanner het scherm afdekt voordat je een letter hebt kunnen plakken. De taak zelf, woorden tellen in een stuk tekst, kost een moderne browser geen noemenswaardige tijd. Vrijwel alles wat de bezoeker ervaart als traagheid komt van de laag eromheen.

Dat maakt de niche interessant. Er valt weinig te winnen op functionaliteit, want tellen is tellen. Er valt wel iets te winnen op rust, snelheid en vertrouwen. Wij zagen daarin een concreet uitgangspunt: bouw de tools zo dat ze onmiddellijk klaarstaan, laat het invoerveld het middelpunt van de pagina zijn, en zorg dat de tekst die iemand plakt in de browser blijft.

De naam volgde uit dat idee. WordBench is een werkbank, geen platform: je legt er iets op, je doet er iets mee, je neemt het weer mee. De tagline zegt hetzelfde, 'A calm bench for working with words.' Dat woord 'calm' is geen sfeerwoord achteraf, het is de maatstaf waar we de ontwerp- en techniekkeuzes langs hebben gelegd. Waar een gebruikelijke oplossing botste met die maatstaf, is de gebruikelijke oplossing gesneuveld.

De site heeft een eigen design-systeem dat we Calm Writer noemen, vastgelegd in handgeschreven CSS. Er zit geen CSS-framework onder en geen thema dat we ergens vandaan hebben gehaald. De grond is warm off-white (--paper #faf8f4), verhoogde vlakken zijn een tint lichter (--card #fffdf9), de tekstkleur is een warme inkt (--ink #2e2b27) in plaats van zwart, en het accent is een gedempt salie (--sage #5b7a6b) met een dieper broertje voor hover- en actieve staten. Eén amberkleur (--amber #b07a3c) is gereserveerd voor het zeldzame tweede accent, en wordt daarom bijna nergens ingezet.

De typografie draagt hetzelfde argument. Koppen staan in Newsreader, een serif die is gemaakt om gelezen te worden, terwijl de interface zelf een humanistische system sans gebruikt die al op het apparaat aanwezig is en dus niets hoeft te downloaden. De regellengte is vastgezet op zo'n 68 tekens, zodat de langere uitleg op de toolpagina's leesbaar blijft in plaats van uit te waaieren over een breed scherm. Dat token staat in de CSS naast de kleuren, zodat het een gedeelde afspraak is en geen losse keuze per pagina.

De keuze past bij het onderwerp omdat het onderwerp taal is. Wie hier komt is aan het schrijven of aan het redigeren, en heeft een omgeving nodig die niet met dat werk concurreert. Papierkleur in plaats van wit, inkt in plaats van zwart, een leesserif in plaats van een merklettertype dat aandacht vraagt: het zijn kleine beslissingen die samen bepalen of iemand het gevoel heeft dat de pagina meewerkt. Het palet loopt door tot in de OG-beelden, die in dezelfde papier- en salietinten worden getekend, zodat een gedeelde link er al uitziet als de site waar hij heen wijst.

Onder de motorkap is WordBench opgezet als een datamodel met een dunne renderlaag eromheen. De tekstbewerkingen leven als pure functies in één module: getStats, keywordDensity, convertCase, sortLines, wordFrequency, slugify, findAndReplace, generateLorem en de rest. Ze weten niets van React, niets van routing en niets van de pagina waarop ze belanden. Ze krijgen tekst en geven tekst of getallen terug. Dat maakt ze los te lezen, los te testen en los te hergebruiken: de word counter en de guide over leestijd rekenen met dezelfde functie.

Daarnaast staat het toolbestand, waarin een tool één configuratie-object is: slug, naam, doelzoekwoord, metatitel, metabeschrijving, welke interactieve component gemount moet worden, de lange introtekst, de doelgroepen, een uitgewerkt voorbeeld en een eigen FAQ. Over de achttien tools heen zitten daar ruim zeventig FAQ-items in, allemaal specifiek voor het gereedschap waar ze bij staan. De toolroute draait dat via generateStaticParams uit tot een volledige pagina per tool, en de tool verschijnt daarmee ook in de sitemap en op de tools-index. Een tool toevoegen is een entry in dat bestand plus een mapping naar de component.

Die scheiding is de reden dat de site kon groeien van acht tools naar achttien zonder dat de paginalaag mee hoefde te groeien. Het typemodel bewaakt het: de component-eigenschap is een union van toegestane waarden en TypeScript staat op strict, dus een tool die naar een component wijst die niet bestaat komt de build niet door. De keerzijde van zo'n opzet is dat de documentatie eromheen achterop raakt; de README noemt nog steeds acht tools. Dat is precies de goede kant om het mis te hebben: de waarheid staat in het datamodel, niet in een tekst die je apart moet bijwerken.

WordBench draait op Next.js 16 met de App Router, React 19 en TypeScript in strict mode, en is statisch gegenereerd. De productieafhankelijkheden zijn next, react en react-dom, en verder niets. Dat is een bewuste rem: elke extra dependency is code die je niet zelf hebt gelezen, die je moet blijven bijwerken en die de bundel groter maakt. Omdat er geen server-runtime nodig is, komt de pagina van de rand van het netwerk en staat het invoerveld er zodra de HTML er is.

Het belangrijkste kenmerk is wat er niet gebeurt. Er is geen backend en geen database, en de tools zelf doen geen netwerkverzoek. De enige plek in de uitgeleverde applicatiecode waar een verzoek vandaan komt, is het contactformulier, en dat vuurt pas als de bezoeker op verzenden drukt. Daarnaast bevat de repository een ops-script dat na een deploy de sitemap ophaalt en de URL's bij IndexNow aanmeldt; dat draait op de commandoregel en komt niet in de bundel terecht. De tekst die je in het invoerveld plakt, wordt door een pure functie in het geheugen van je eigen browser verwerkt en verlaat het apparaat niet.

Dat is tegelijk het snelheidsverhaal en het privacyverhaal, en die twee vallen hier samen. Omdat er niets naar een server gaat, is er geen wachttijd tussen typen en resultaat: de teller loopt mee terwijl je plakt. En omdat er niets naar een server gaat, hoef je de privacybelofte niet op ons woord te geloven. Je kunt het netwerktabblad van je eigen browser openen en meekijken terwijl je tekst plakt. Wie een concurrentiebeding, een sollicitatiebrief of een medisch verslag in het veld zet, kan dat zelf nagaan in plaats van het aan te nemen.

De vindbaarheid is vanaf de eerste commit meegebouwd in plaats van er later opgeplakt. Iedere route heeft een eigen title, metabeschrijving en canonical, de metadataBase staat in de root layout, en robots wijst naar de sitemap. De sitemap bouwt zichzelf op uit de datasets en komt uit op 28 URL's: zeven vaste routes, achttien toolpagina's en drie guides. De datum die daarin meegaat is bewust een vaste waarde in plaats van new Date(), met in de code de uitleg waarom: een sitemap die bij elke build opnieuw stempelt, meldt versheid die er niet is.

De gestructureerde data verschilt per paginatype, en staat niet overal. De homepage draagt WebSite, WebApplication en een ItemList van de tools. Een toolpagina draagt SoftwareApplication, BreadcrumbList en FAQPage, waarbij die FAQPage uit dezelfde FAQ-items in de configuratie komt als de zichtbare lijst eronder, dus er is één bron in plaats van twee die uit de pas kunnen raken. De guides dragen Article, BreadcrumbList en FAQPage. De informatieve pagina's, over ons, contact, privacy en voorwaarden, dragen geen JSON-LD: daar valt niets te markeren dat een zoekmachine iets oplevert. Van de 28 URL's dragen er zo 24 gestructureerde data. Ook de OG-beelden volgen die logica: elke tool heeft een eigen, vooraf gebouwd beeld met zijn eigen naam erin, terwijl de overige pagina's het site-brede beeld delen.

Naast de toolpagina's staat een tweede laag: de guides. Die mikken op vragen in plaats van gereedschappen, zoals 'how many words is 500 characters' en 'how long to read 1000 words', en zijn opgezet met een kort direct antwoord bovenaan van hooguit zeventig woorden, gevolgd door de live word counter zelf, een tabel en een FAQ. Ze citeren hun bronnen, waaronder de meta-analyse van Brysbaert (2019) in het Journal of Memory and Language, die 190 studies en 18.573 deelnemers samenvat. Diezelfde onderbouwing zit in de tool: leestijd rekent met 238 woorden per minuut, spreektijd met 130. Dat zijn cijfers met een herkomst in plaats van een ronde gok, en dat is precies wat een guide moet doen: antwoord geven en laten zien waar het antwoord vandaan komt.

De eerste commit dateert van 2 juli 2026 en de site groeide binnen een dag door van acht naar achttien tools, met de drie guides erachteraan. Het is een jong domein in een niche waar de bovenste posities al jaren bezet worden gehouden, en dat is ook het spel dat we spelen: de flagship-term 'word counter' is een kwestie van lange adem via gebruikservaring, terwijl de long tail eromheen, van 'remove duplicate lines' tot 'upside down text' tot de vraaggerichte guides, de winbare kant is. De advertentie-infrastructuur staat klaar maar is uit: de advertentieslots en de consent-banner zitten in de codebase en blijven inert tot een omgevingsvariabele ze aanzet. Dat is een keuze die we later kunnen maken zonder de architectuur open te breken.

Voor ons is WordBench in de eerste plaats een bewijsstuk. De site is van begin tot eind eigen werk: de merknaam en tagline, het Calm Writer design-systeem, de architectuur met pure functies en een configuratiegedreven paginalaag, de SEO-plumbing, de OG-beelden en het onderhoud daarna. Er zit geen thema onder, geen paginabouwer en geen ingehuurde laag. De beslissingen zijn terug te lezen in de repository, inclusief de plekken waar we onszelf hebben ingehaald.

Dat is ook wat het laat zien over hoe wij aan projecten werken. Een keuze als 'geen backend' is tegelijk een merkbeslissing, een privacybeslissing en een prestatiebeslissing, en die drie horen bij ons in hetzelfde gesprek thuis in plaats van bij drie verschillende partijen. WordBench is klein genoeg om helemaal te overzien en volwassen genoeg om te laten zien wat er gebeurt als ontwerp, techniek en vindbaarheid door dezelfde mensen worden bedacht.