Performance-First Front-End Tools Worth Trying in 2023
Another year of front-end development brings another wave of tools designed to streamline workflows and boost performance. Among the most-clicked resources from the past year, a clear pattern emerges: developers are gravitating toward solutions that offer speed, smaller bundles, and less runtime overhead.
Zero-Runtime and Lightweight Solutions
Kuma UI takes a hybrid approach to CSS-in-JS. It markets itself as a headless, utility-first, zero-runtime component library, yet it still allows for dynamic style changes at runtime. This combination aims to give developers the flexibility of runtime styling without sacrificing the performance benefits typically associated with zero-runtime solutions.
For those looking to avoid configuration overhead entirely, VanJS offers a React-like UI library experience without JSX or a virtual DOM. Claiming to be the world's smallest UI library at under 1kb, it comes with first-class TypeScript support and touts strong performance compared to larger frameworks.
CSS Components enters the CSS-in-JS space as a direct response to the challenges of using such tools with React Server Components. Inspired by Stitches, this library promises an improved developer experience without the usual friction in modern React architectures.
Building for the Server and Edge
Server-side approaches continued to gain traction. HatTip offers a more universal alternative to Express.js for building HTTP server apps. The set of JavaScript packages allows developers to write server code that can be deployed across AWS, Cloudflare Workers, and Vercel without major rewrites.
Taking a different server-side route, LiveViewJS brings the "LiveView" pattern from Elixir's Phoenix framework to Node.js and Deno. By moving state management and event handling to the server, it enables HTML updates via WebSockets, delivering fast first paint and real-time functionality without client-side routing.
In the realm of TypeScript, Effect stands out as a library for building complex synchronous and asynchronous programs. It leverages structured concurrency, a paradigm that helps manage multiple operations running simultaneously, to create robust and scalable applications.
UI Components and Visual Tools
Carousels remain a staple request, and Boxslider provides a solid option. The component offers seven distinct slide transition effects, including a 3D cube effect, tile flip, and a simple fade, giving developers flexibility without heavy dependencies.
Materialize returns to the spotlight as an open-source framework of UI components built on Google's Material Design. It's a maintained fork of an older, abandoned project, offering over 20 categories of components.
Tailwind CSS continues to dominate the utility-first space, and several libraries capitalised on it. Mamba UI offers a library of 150+ pre-styled components in 40+ categories, with code available in HTML, Vue, or JSX formats. Keep React provides 40+ Tailwind and React-based components that are easy to customise with standard classes. For Bootstrap users looking to modernise, TW Elements recreates more than 500 Bootstrap components using Tailwind CSS with a better overall design.
Generators, References, and Assets
GradientGenerator is an interactive tool for building advanced layered CSS gradients. It offers a wide range of settings for customisation, plus the ability to save gradients to a personal library or import community-built ones.
For scrollbar styling, Scrollbar.app serves as both a reference and a code generation tool. You can live-test scrollbars on the page, with the generated CSS incorporating vendor-specific pseudo-elements alongside the future-friendly scrollbar-color property.
Fontpair curates font pairings from Google Fonts, with all combinations manually selected by the authors to ensure harmony in your designs. Free Icons delivers 22,000+ SVG icons, covering both brand and general-use categories, filterable by keyword on the homepage.
Email design gets a boost from Easy Email, a drag-and-drop editor based on MJML. This tool transforms structured JSON data into HTML that is compatible with major email clients and includes features for customising blocks and themes.
CSS Loaders is a gallery of more than 600 loading animations categorised under 30+ styles. Copy-paste-ready HTML and CSS make it easy to grab a spinner in seconds. Likewise, Ribbon Shapes provides a gallery of pure CSS ribbons created with a single HTML element, customisable via CSS variables.
Avatars are a common design need, and PeepsLab lets you customise illustrated user avatars by cycling through skin tones, hair styles, facial hair, and accessories, with a randomise button for quick results. Picyard generates screenshots with attractive backgrounds for social media and mockups, with premium tiers for code snippets and charts.
Practical Code Helpers
Termino.js is a dependency-free component for adding terminal-based animations, games, or interactive apps to a page. iDraw.js offers a straightforward JavaScript framework for building Canvas-based drawing applications.
For QR code generation, qr-code is an SVG-based web component that supports animation and is completely dependency-free. The component is easy to customise, with an interactive demo page to test different effects.
To improve autocomplete functionality, Autocomplete provides an open-source, production-ready JavaScript library that works with any virtual DOM solution, including vanilla JS, React, and Vue.
The AI wave also made its mark with OpenGPT, an open-source AI platform for building and using ChatGPT applications. The companion directory lists over 11,000 apps you can search and filter by category.
Finally, for full-stack experimentation, Breadit offers a modern Reddit clone built with Next.js App Router, TypeScript, and Tailwind, featuring infinite scroll, NextAuth, and rich post editing. Toaster and Flectofy round out the list with experimental tools: the former a pure CSS 3D editor working with CSS transforms, and the latter a niche SVG shape generator. For those tired of lorem ipsum, UI Content provides professional placeholder text and dummy SVG logos under various categories to keep designs looking close to the final product.
WebGL and 3D Tooling
Vessel.js is a JavaScript library built on Three.js for conceptual ship design. The project includes a gallery of examples and a tutorial covering best practices for use.
Two other Three.js-based libraries also stand out. Space.js targets the creation of "future" UIs and panel components, with a sibling library called Alien.js for 3D utilities, materials, shaders, and physics. Space.js was the most-clicked tool in the author's newsletter over the past year. Strawberry is a related but separate "tiny" front-end framework offering reactivity and composability with zero dependencies, no build step, and a footprint under 3KB gzipped. It is not intended as a React or Vue alternative, but rather for simpler apps and low-maintenance projects.
Fonts, Symbols, and Images
Modern Font Stacks is a resource for identifying high-performing font stacks based on pre-installed default OS fonts. It covers typographic categories such as Traditional, Old Style, Neo-Grotesque, Monospace Code, and Handwritten, all of which are generally available across Windows, Mac, Linux, iOS, and Android, eliminating extra resource requests.
FancySymbol provides a large repository of ready-to-copy special characters, text symbols, and foreign language symbols across more than 50 categories. It also supports generating unique text forms like upside-down text or "invisible ink."
For photography, Picography offers high-resolution, royalty-free stock photos. Images are categorized and searchable, available for free use in commercial projects.
UI Components and Design Systems
Washington Post Design System is a UI kit built for Washington Post properties. Although intended for their engineers, it is MIT-licensed and built with React using Stitches and Radix UI, so the customizable components may suit teams on a similar stack.
Float UI provides over 100 responsive and accessible UI components with RTL support, plus five templates. Built with Tailwind, components work with React, Vue, Svelte, or plain HTML with Tailwind classes. Sailboat UI is another Tailwind-based library with 150+ open-source components. The docs include search and live previews, and the components follow a Bootstrap-esque aesthetic.
PCUI is a React-based component library with pre-styled components. A storybook demos the basics, and additional examples show advanced use cases, including a to-do list and an example tracking UI state history.
Pines is a UI component library built with Tailwind and Alpine, the JavaScript framework similar to a modern jQuery. It includes dozens of components spanning animations, sliders, tooltips, accordions, and modals. Park UI is another option, built on Ark UI, with accessible and customizable components for building your own design system. It supports React, Vue, Solid, Panda CSS, and Tailwind, and its home page includes an interactive widget showing how easily components can be styled.
Clone UI is an AI-based tool for generating UI components from text prompts. The app provides five free daily credits and features a showcase of user-generated components.
Email and Form Tooling
Mailo is a component-based, interactive HTML email layout designer for building cross-client, responsive emails. It includes pre-built components and team features designed to work with virtually any email client.
Maily is an open-source HTML email editor using pre-built components for buttons, variables, text formatting, images, logos, alignment, dividers, spacers, footers, lists, and quotes, with more on the way.
FormSpamPrevention is a vanilla JavaScript and HTML solution for preventing form spam. The script uses custom HTML tags for form content that get converted to valid HTML tags. Though not a widely popular project, it gained traction when shared last year.
Data Visualization and Interaction
Observable Plot is a JavaScript library for creating exploratory data visualizations with SVG-based charts. Plots can incorporate features like scales, projections, legends, curves, and markers, all documented with interactive examples.
Calendar.js is a lightweight, dependency-free calendar and date picker library. It is fully configurable and supports drag-and-drop events, exporting, and importing from iCal and JSON.
Swap.js is a JavaScript micro-library under 100 lines of code that uses HTML attributes for Ajax-style navigation. Similar to HTMX and Hotwire, it replaces page content by sending server requests that return HTML fragments.
Better Select is a web component providing a minimal custom select element, with a fallback option and configurable attributes for functionality and appearance.
Leporello.js is an interactive functional programming IDE for JavaScript that executes code instantly as you type, potentially aiding the debugging process.
Design Aids and AI Tools
CSS Generators is a small collection of CSS generators. It stands out for including two glow generators (for text and elements) and an underline generator, which are less common among similar tools.
Calligrapher.ai is an online tool for generating AI handwriting samples that can be downloaded as SVG. Users type text, adjust stroke width and legibility, and choose from nine print and cursive styles.
Accessible Color Palette Generator helps ensure designs start with accessible color choices. It can generate a random accessible palette or create one based on a user-entered color. Realtime Colors lets you test color palettes and typography on live UI elements in real time, with support for dark and light modes and deep links for sharing specific palettes.
Shaper is a generative design tool for UI interfaces. Users can visually adjust typography, spacing, and vertical rhythm, then copy and paste the resulting design tokens as CSS variables.
restorePhotos.io uses AI to restore or correct old, blurry, or damaged photos. It is open-source and can be self-hosted, or used online for up to five free restorations per day.
Chatbox is a native app for Windows, Mac, and Linux offering an AI copilot on the desktop. It taps into various LLM models and functions as a general productivity tool for daily tech tasks, though it is not strictly for web development.
Iconhunt is an icon search engine with access to over 170,000 free, open-source icons. Icons can be downloaded in formats including Notion, Figma, SVG, or PNG, with color customization available before download.
