Introducing VHS

In my last post, “A Solid choice”, I talked about my decade-long journey as a web developer, from UnityScript to being deeply entrenched in the “React-way” of doing things. I shared why I ultimately decided to embrace SolidJS as a path towards a more ergonomic and performant developer experience.

Initially, I was just going to pair a Solid frontend with a Hono backend and package it into a neat Bun monorepo template. But eventually, I decided it would be fun to create my own stack. It had a few requirements:

  • It needed to use Solid for the frontend and Hono for the backend.
  • It needed to be client-first but have SSR support.
  • It needed a file-based router.

After a bit of searching, it became a clear I needed a Vite based tool, but Vinxi, on which both SolidStart and Tanstack Start are built, uses Nitro and one of the requirements is Hono. A little bit more of research led me to Vike and SSRx. Both promising, but Vike seemed like the most stable of the two, along with it’s file-based router, my last two requirements were met.

Bringing it all together

For all my time using React, one of my favorite stacks to use for the past 4 years has been the T3 Stack. As such, the VHS stack is heavily inspired by it, with some key modifications.

The T3 philosophy of simplicity, modularity, and end-to-end type safety is something I wanted to preserve. The “key modifications” in VHS are all choices made to double down on performance and developer freedom, moving away from tools that are popular but might carry extra overhead.

What’s the same?

The magic of the T3 Stack is tRPC. It was non-negotiable. The ability to write backend functions and call them from the frontend with full type safety and auto-completion is a transformative developer experience. VHS integrates tRPC deeply, running the router on our Hono server to provide that same seamless API layer.

For the database, VHS defaults to Drizzle ORM. The T3 community also embraces Drizzle as a fantastic, lightweight alternative to Prisma. I chose it as the default for VHS because its TypeScript-native approach and philosophy of staying close to SQL align perfectly with the goal of reducing unnecessary abstraction.

The VHS Approach

Of course, the most fundamental part of the VHS approach is its core architecture. As discussed, it purposefully moves away from the React/Next.js ecosystem. Instead, it combines SolidJS, Vike, and Hono to provide a foundation that is inherently faster and less abstract, while still delivering modern features like SSR.

Beyond that, VHS carves its own path in the surrounding tools, which were selected to maximize speed and developer experience.

For styling, instead of the more common Tailwind CSS, I chose UnoCSS. It provides the utility-first syntax we all know and love but operates as an on-demand engine. This means zero-overhead, instant startup times, and ultimate flexibility.

The VHS Stack

So, what is VHS? It’s a cohesive, modern web stack built on these carefully chosen pieces:

  • Vike: For powerful, file-based routing and server-side rendering.
  • Hono: For a minimalist, ultrafast server backend.
  • SolidJS: For a truly reactive and performant frontend.
  • tRPC: For that magical, end-to-end type-safe API.
  • Drizzle: For a lightweight, TypeScript-native ORM (default).
  • UnoCSS: For on-demand, utility-first styling.
  • Bun: For the recommended all-in-one, high-speed toolkit.

It’s my answer to pairing a truly modern frontend with a full-stack architecture that values speed and developer freedom above all else.

VHS is still under heavy development, but you can try it using:

bun create vhs@latest
# or
npx create-vhs@latest