Build your site

An end-to-end walkthrough that installs the toolkit, points it at your store, and explains the files that turn your catalog into a site – in Next.js, Astro, React Router, or TanStack Start.

This is the hands-on path through building against the API: a single walkthrough that installs fontdue-js, points it at your store, and explains the handful of files that turn your catalog into a working site. Pick your framework from the switcher above – the choice carries through the rest of the walkthrough – and follow the pages in order.

Each page explains part of the reference template for your framework. Clone it first and read along; the code there is the source of truth, and each page below takes apart the part that matters.

React Router 7: fontdue/example-react-router.

TanStack Start: fontdue/example-tanstack.

The walkthrough is deliberately the happy path. It gets you to a data-driven site – a home page, a detail page per typeface, a cart and checkout – without the advanced detours. Those live in the how-to guides: preloading your own webfont CSS, wiring up GraphQL codegen from scratch, styling Stripe Elements, and the rest. The pages here link out to them at the point each one becomes relevant.

Alongside the walkthrough, The GraphQL API and the GraphQL Playground document the read interface the whole site fetches from. Already running an earlier version of fontdue-js? v2 was Next.js-only, and Migrate from v2 is the upgrade path to the framework-agnostic v3.