Tech stack
The tools Tüpfli builds with, grouped by category, each described by what it does and what it changes for the people who use the result.
Framework
- Astro (opens in a new tab)
A web framework that renders pages to plain HTML at build time and sends JavaScript only for the parts that need it, which keeps pages light.
- React (opens in a new tab)
Meta's library for building interfaces from components. It suits pages that behave like an application, with state that changes as people work.
- Next.js (opens in a new tab)
A React framework that renders pages on the server and hands them to the browser ready to read. It also brings routing and image handling.
- TanStack Router (opens in a new tab)
A router for React apps that checks every address and its parameters with TypeScript, so broken links surface before release.
Data
- TanStack Query (opens in a new tab)
Fetches server data, caches it and refreshes it in the background, so an app shows known data at once and updates it without blocking the screen.
Interface components
- Base UI (opens in a new tab)
Unstyled interface components such as menus, dialogs and selects, with keyboard handling and screen reader support built in; the design stays free.
- React Aria (opens in a new tab)
Adobe's library of accessible interface components, including date pickers and calendars, adapted to the language and conventions of each locale.
Icons
- Lucide (opens in a new tab)
An open-source icon set with a consistent line style. Each icon is imported on its own, so a page ships only the icons it shows.
Styling
- CSS (opens in a new tab)
The W3C language that describes layout, colour, type and motion in the browser. Modern CSS handles much that once needed JavaScript.
- Tailwind CSS (opens in a new tab)
A CSS framework of small utility classes that keeps large interfaces consistent. The build generates only the classes a project actually uses.
Motion and 3D
- GSAP (opens in a new tab)
A JavaScript animation library for precise, choreographed motion with exact timing. It can load only on pages that need the movement.
- Motion (opens in a new tab)
An animation library for React and the web (formerly Framer Motion). It animates elements as they enter the view or follow the scroll position.
- Three.js (opens in a new tab)
A JavaScript library that renders 3D scenes and models in the browser with WebGL, without plugins.
Language
- TypeScript (opens in a new tab)
Microsoft's extension of JavaScript with types. The compiler catches many errors while the code is written, before any visitor meets them.
Runtime and tools
- Bun (opens in a new tab)
A JavaScript runtime that also installs packages, runs tests and bundles code, in a single tool.
- Vite (opens in a new tab)
A build tool and development server for web apps. It shows code changes in the browser almost instantly and bundles the app for release.
Documents
- Typst (opens in a new tab)
A markup-based typesetting system for documents such as offers, reports and letters. It produces print-quality PDFs and can read the same brand values as a website.
Hosting
- nginx (opens in a new tab)
An open-source web server that delivers files, sets security headers and caching rules, and passes requests on to applications.
- Vercel (opens in a new tab)
A hosting platform made for Next.js. It builds each change, publishes it worldwide and serves pages from a network close to the visitor.
- Coolify (opens in a new tab)
An open-source platform for deploying and running websites, apps and databases on servers of one's own choice instead of a vendor's cloud.
Analytics
- Umami (opens in a new tab)
Open-source web analytics that count visits without cookies and without building personal profiles of visitors.
Measurement
- Lighthouse (opens in a new tab)
Google's open-source tool that audits a page for performance, accessibility, best practices and search basics, and scores each from 0 to 100.