Xenmaster's 2026 Front-End Web Development Catalog

HTML is the standard markup language used to create web pages, and its elements form the building blocks of all websites. It forms the basis for the structure of each webpage and is used to determine the Document Object Model (DOM) which can be manipulated by client-side logic and server side delivery of content and functionality. A must have for web development.

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Can be very cumbersome to work with for large projects so CSS frameworks like Tailwind have been developed to manage this issue.

Note that while other tools like CSS-in-JS and preprocessors like SASS have been used in the past, their popularity has been declining in my experience.

A utility-first CSS framework for rapidly building custom user interfaces. The industry standard for how styling occurs on the web.

Web-based Git hosting service facilitating collaboration, with features like issue tracking, social networking, and wikis for project management. The industry standard for managing code, however Gitlab is becoming more common with Codeberg becoming popular for open source projects.

This is an up-to-date fork of GitHub Desktop, with many quality of life improvements and advanced features for power users. A desktop utility if a user prefers not to interact with Github in the terminal or the browser.

Lightweight open source API client for testing endpoints, saving requests as plain text files, offline use, git-compatible collaboration, and privacy-focused storage. An important tool that surpasses more industry standard tools like Postman and Insomnia. It is more open and has a great developer experience.

Web-based vector graphics editor with desktop apps, focusing on real-time collaboration and version control for UI/UX design. Works well as a collaborative design editor, but works well as a single user prototyping tool.

Professional tool combining photo editing, vector illustration, and layout features with non-destructive editing, file compatibility, AI tools, and cloud integration. Useful in particular for designing web graphics. Only downside is no Linux version.

Vector design app for UI, UX, and web work, supporting native editing of .sketch files, real-time collaboration, AI features, and asset export in multiple formats. Similar to the pay-to-use Sketch software for Mac, but is cross platform and also is available in Flathub for all Linux distributions.

Nobody cool uses basic JavaScript anymore in 2026. TypeScript is a language for application-scale JavaScript development. It is a typed superset of JavaScript that compiles to plain JavaScript in any browser, any host, any OS and it is Open Source. Using TypeScript makes JavaScript easy to use on large projects and helps catch potential runtime errors. Note that TypeScript will be used synonymously with Javascript below, but when in doubt, use TypeScript.

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser. This allows JavaScript to do more than basic functions in the browser and also serves as a foundation for the libraries listed below.

Free, extensible code editor with Git integration and thousands of JavaScript plugins. This is the most popular editor, but be wary that running un-trusted third party extensions increases the potential for a supply side hack to get you. Keep things simple or use a fully built out IDE like Webstorm for JavaScript development.

A cross-platform version of Visual Studio Code which does not have built in telemetry called Codium is also available.

npm is a package manager for Node.js that is run through the command line and manages dependencies for an application. It is the predominant package manager for Node.js and can be used to download and integrate all the libraries listed below for your environment.

Lo-Dash is a drop-in replacement for Underscore.js that delivers performance improvements, bug fixes, and additional functions not available natively in JavaScript. Note that this is changing quickly as JavaScript evolves and this library is currently in maintenance mode, to keep this in mind.

ESLint statically analyzes code to quickly find problems. It is built into most text editors and can run ESLint as part of continuous integration pipeline. A plug-in for ESlint is available on VSCode.

Prettier is an opinionated code formatter with support for various languages. This is also a library with an available plugin on VSCode.

A toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP. Biome is not as mature as Prettier and ESLint, but can be used to replace both.

A front-end tool with instant server start using native ESM, rapid hot module replacement, and universal plugin interface for versatile development. One of the most popular JavaScript tools around, according to the most recent StateOfJS survey.

An extremely fast JavaScript bundler and minifier. Used in newer projects to replace older more cumbersome tools like Webpack.

Testing framework with Vite integration, Jest compatibility, smart watch mode, and support for ESM, TypeScript, and JSX. Primarily used for unit testing. Also ranks very high on the StateofJS survey.

Playwright is a Node library that automates Chromium, WebKit, and Firefox browsers with a single API for reliable web automation. Playwright is used for end-to-end testing in JavaScript and can also be used for .NET as well.

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext. The best use case is websites that are mostly static and only require basic interactivity - this library will be a lot lighter than a heavier framework like React (see below).

A JavaScript library for building user interfaces. Built by Meta, this library is the de-facto standard for modern day web application development. Other similar tools like Vue and Angular are still around, but React has the most job openings and is most commonly used for new enterprise projects.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed. Supported by Vercel for easy deployments. I'll be creating a separate list exclusively showing the anatomy of a NextJS application, so stay tuned!

Svelte is a component framework that compiles declarative code into efficient JavaScript that updates the DOM with surgical precision. It is similar to React and Vue.js and offers a build process to optimize performance, but instead manipulating a virtual DOM like React, Svelte includes a build component which compiles to basic JavaScript and loads that into the client browser, reducing overhead for delivery and execution. Very useful when developing evergreen projects which don't require a framework as heavy as React.

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte. If you're coming from React, SvelteKit is similar to Next and has a lot of added features natively built into the server side rendering engine. The bad news is the ecosystem doesn't have quite as many well maintained third-party libraries.

Astro is an all-in-one web framework for building fast, content-focused websites. While NextJS and SvelteKit can be used to build static sites, Astro is specifically designed for this functionality and is well worth learning.

Tauri is a toolkit that helps developers make applications for the major desktop platforms - using virtually any frontend framework in existence. The core is built with Rust and the CLI leverages Node.js. Much faster and more efficient than its older brother Electron. However, the mobile functionality is still very new so keep that in mind.

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. Unfortunately, the only real option for developing mobile UIs in JavaScript/TypeScript.

C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines. More robust than JavaScript and supported by Microsoft.

Microsoft Visual Studio is an IDE used to create programs, apps, websites, and web services using various frameworks. It supports multiple languages and offers tools for coding, debugging, and design. Often used for development for the .NET backend, but also works well with Blazor.

NuGet is a Visual Studio extension that makes it easy to install and update open source libraries and tools in Visual Studio. Basically an npm for .NET.

Blazor lets you build interactive web UIs using C# instead of JavaScript. It allows you to create web applications using HTML, CSS and C# by compiling C# into WebAssembly as described above.

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web. WebAssembly is what allows Blazor to operate as a viable front-end framework for C#.

bUnit is a testing library for Blazor components that make tests look, feel, and runs like regular unit tests.

ASP.NET SignalR is a new library for ASP.NET developers that makes it incredibly simple to add real-time web functionality to your applications. Useful for interacting directly with the backend of the application in real-time.

BlazorStatic aims to be intuitive and easy to use for most developers who have worked with any kind of front-end framework, especially for those who already work with Blazor. Used as a static site generator, similar to Astro and Lume.

NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop. Mature framework most commonly used to develop mobile front-ends for .NET applications, but is cumbersome for many to use.

Avalonia is a WPF-inspired cross-platform XAML-based UI framework providing a flexible styling system and supporting a wide range of platforms including: Windows, Linux (desktop & embedded), macOS, Android, iOS and Browser. A more modern alternative to .net MAUI which is also useful for desktop applications.

An approachable, portable, and productive language for high-quality apps on any platform. Includes a strong type system and was originally developed by Google as a replacement for JavaScript as the ideal web development language. That didn’t happen. Dart suffers a lot less from the complexities of multiple frameworks and third-party libraries than JavaScript and TypeScript, but has a much smaller community, and many third party libraries are not maintained.

Pub is the package manager for Dart. Basically similar to npm or NuGet.

Jaspr is a modern web framework for building websites in Dart with support for both client-side and server-side rendering. The websites for Dart and Flutter are built using this framework and is ideal for building a front-end without JavaScript without resorting to the heavier interactivity that Flutter was built for.

A static site generator for Dart. Not very commonly used and is barely maintained.

Build apps for any screen. Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. Note that this method of building websites is specifically designed for highly-interactive applications viewed through a browser. Content heavy sites with SEO and fast-loading requirements should not be built using Flutter web, Jaspr should be used instead when using Dart. If your website requires the use of native styling, using React Native is a better idea.