Vite – Next Generation Front End Tooling

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • vite

    Next generation frontend tooling. It's fast!

    I've used Vite in a simple vuejs project and love its simplicity over webpack.

    However, debugging Vue3 with hot-module-reload seems to be broken. The moment HRM changes a source file, the line numbers and breakpoints not always line up and breakpoints. (https://github.com/vitejs/vite/issues/5916). The inability to debug properly is not a minor issue so I'm torn to go back to webpack or disable HMR to keep using Vite.

    Other than that, the simplification that Vite brings to the build process is sorely needed. I can only imagine how many developer hours have been lost in dealing with Webpack configuration issues. It is ironic that setting up a web development environment is more complicated than building a basic application. Thank you Vite developers for offering relief :)!

  • SvelteKit

    web development, streamlined (by sveltejs)

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • esbuild

    An extremely fast bundler for the web

  • create-rust-app

    Set up a modern rust+react web app by running one command.

    I switched from CRA to Vite for create-rust-app[1]. If you ever needed to bundle JS/TS in an SSR framework (language agnostic), vite is a great choice :)

    [1] https://github.com/Wulf/create-rust-app

  • Playwright

    Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

    This is a good point if we were selling physical goods and limited by the amount of information we can convey on a screen but we aren't.

    I'd honestly include things like the what and why as critical to documentation. Most libraries, tools, and tech in general are bad at documentation. It's an active choice to omit discussing these things when they should obviously be included but writing good copy is hard.

    IDK seems like a good thing to invest in especially if you want your tool to become a dominate player instead of an encroaching tangent.

    While there are separate pages for the why and comparisons for vite (but it's only comparing itself to other bleeding edge tools rather than popular ones like webpack, browserify, gulp, grunt) they should be snippets of these sections on the front page. Right now there are 6 title cards of with wasted space with very little information. Compare this with playwright's home page you and immediately know why you want to use the tool:

    https://playwright.dev/

    For a personal taste thing, I'm not really a fan of these open source tools creating homepages similar to as you would see for various startups/products. My mind immediately goes "oh paid tool, oh well." They do say it's free in a lovely medium size text that doesn't standout much and is beyond the fold.

  • jsbundling-rails

    Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.

    I don't know what's involved with Laravel's front-end stuff but Rails is using https://github.com/rails/jsbundling-rails which lets you pick whichever front-end tool you want to use that's supported (esbuild + webpack + rollup at the moment). You're no longer bound to a specific tool that's been modified to work with Rails, instead you can use the native tool with its native configuration.

    esbuild with Rails 7 is extremely easy nowadays. It's pretty much running a single esbuild command with a couple of flags, there's not even a config file you need to mess around with.

  • svelte-slider

    Simple range slider for Svelte 3

    To be honest I'm not a front end developer, just learned that a few things on GitHub had issues outstanding about SK issues, and avoided them after the first run-in. Massive props to Svelte to allow me to finish my project while actually, somehow, enjoying the front end development portions though!

    The one I ran into: https://github.com/BulatDashiev/svelte-slider

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • swc

    Rust-based platform for the Web

    Vite is excellent and https://swc.rs is another one to keep an eye on.

  • joystick

    A full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.

  • dark

    Darklang main repo, including language, backend, and infra

    I see the same issue with libraries and frameworks in any language. For example, I came across Dark Lang [1] yesterday, and the front page is similarly cryptic if you aren't familiar with back end work.

    [1]: https://darklang.com/

  • vite-react-starter

    Vite react starter

  • Quasar Framework

    Quasar Framework - Build high-performance VueJS user interfaces in record time

    if you want out of the box Vue 3 component framework, try https://quasar.dev/

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts