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.