Hono + Preact - The Ultimate Starter for Web Apps I Can Think Of

Full-stack frameworks are everywhere. Next.js, Nuxt, Remix—they offer incredible developer experience and get you from zero to production fast. But there's a trade-off we occasionally talk about.

When you deeply depend on a framework, you inherit its risks. Security vulnerabilities, breaking changes, deprecated APIs. Overtime, you'll spend more time keeping up with the framework than building your product. And let's be honest: the JavaScript ecosystem moves fast. Too fast, sometimes.

Many developers want "lightweight" alternatives. Fewer abstractions, less magic, more control. But the convenience of batteries-included frameworks is hard to leave behind. React, Next.js, Vercel—they're deeply intertwined, and once you're in that ecosystem, switching costs feel enormous.

The Rise of Lightweight Alternatives

Things are changing. Lightweight frameworks are gaining real momentum.

Hono is a perfect example. Created by a Japanese developer, it started as a simple API framework for Cloudflare Workers. But it's grown into something more—with RPC support, JSX rendering, and SSR capabilities. It's fast, minimal, and runs everywhere: Cloudflare, Deno, Bun, Node.js.

Preact follows a similar philosophy. It's essentially React's API in a 3KB package. No Concurrent Mode complexity, no use() hooks to wrap your head around. For many applications, Preact is all you need—and it's refreshingly simple.

Together, Hono and Preact feel like the right foundation for developers who want power without the weight.

The Problem: A Gap in Resources

However, here's where it gets tricky.

Most tutorials, Stack Overflow answers, and blog posts focus on mainstream tools. Want to build a full-stack app with Hono and Preact? Good luck finding consolidated resources. You're on your own, piecing together scattered documentation and GitHub issues.

The hardest parts? SSR, hydration, and routing.

• How do you render Preact components on the server with Hono?
• How do you hydrate them on the client without duplicating your route definitions?
• How do you handle data loading in a way that works for both server and client?

These aren't impossible problems, but they require digging. And if you just want to start building, that friction is frustrating.

Introducing Hinoco

So I built Hinoco—a full-stack template for Cloudflare Workers using Hono and Preact.

Why? I'm planning to build one Micro SaaS per month in 2026. Rather than solving the same infrastructure problems repeatedly, I wanted a solid foundation ready to go. Something that handles the boring parts so I can focus on the product.

Hinoco is that foundation.

Demo: https://hinoco.keplerjst.workers.dev/

GitHub: https://github.com/keplerjst/hinoco

What's Included

• SSR + Hydration + Routing — Server-rendered pages that hydrate seamlessly on the client
• Hono — Lightweight, fast API framework
• Preact — React-compatible UI in 3KB
• Vite — Fast builds and HMR during development
• Tailwind CSS — Utility-first styling with dark mode support
• Cloudflare D1 + Drizzle ORM — SQLite at the edge with type-safe queries
• GitHub Actions — Automatic deployment on every push to main

Project Structure

  src/
  ├── server.ts          # Hono server entry point
  ├── client.tsx         # Client-side hydration entry point
  ├── App.tsx            # Root Preact component
  ├── routes.ts          # Route definitions
  ├── style.css          # Global styles (Tailwind)
  ├── api/
  │   └── index.ts       # API routes (/api/*)
  ├── app/
  │   ├── routes/        # Page components with loaders
  │   │   ├── home.tsx
  │   │   └── about.tsx
  │   ├── components/    # Shared components
  │   │   ├── Header.tsx
  │   │   └── ThemeProvider.tsx
  │   └── NotFound.tsx   # 404 page
  ├── db/
  │   └── schema.ts      # Drizzle schema
  └── lib/
      └── ssr.tsx        # SSR middleware

Getting Started

# Clone the repository
git clone https://github.com/yourname/hinoco.git
cd hinoco

# Install dependencies
pnpm install

# Create a D1 database
npx wrangler d1 create hinoco-db

# Run migrations locally
npx wrangler d1 migrations apply hinoco-db --local

# Start development server
pnpm run dev

That's it. You're running a full-stack Hono + Preact app on Cloudflare Workers.

Closing Thoughts

I have experience with Next.js, but this was my first time building something serious with Hono and Preact. It's a simple template—intentionally so. But it removes the headaches that come with starting from scratch.

If you're tired of framework complexity and want to try something lighter, give Hinoco a shot. Fork it, modify it, make it yours.

And if you build something cool with it, I'd love to hear about it.