Skip to main content
Everything from wrestling with SSR and server components to annoying hydration quirks and config wars. Devs from all over the world see these patterns as a burden, not a feature.
“React has evolved … into a sprawling ecosystem thought to hinder performance.”
— from blog JavaScript Fatigue Strikes Back
If your goal is to build front ends fast and ship UI, not infrastructure, Hana was made for you image.png

​
What Hana gives you out of the box

Hana gives you:
  • A built-in router with file-based conventions
  • A global state system that’s simple and flexible
  • Auth / session helpers out of the box
  • Zero config, low friction (powered by Vite)
  • Modular adoption let’s you use just the router, the store, auth, or all of them
import { Link } from '@hanabira/router';
import { useStore } from '@hanabira/store';
import { withAuthState } from '@hanabira/auth';

const Dashboard = ({ user, logout }) => {
  const [item, setItem] = useStore<SpecialString>('item');

  return (
    <div>
		<Link to="/about">About</Link>
		<p>Hello, {user.name}</p>
		<button onClick={() => setItem('New value')}>Set item</button>
   		<button onClick={logout}>Logout</button>
    </div>
  );
};

export default withAuthState(Dashboard);
Think of Hanabira as: React + routing + state + auth. The very basics, no overreach. What’s more, you can incrementally add or remove pieces of Hana on demand, so there’s no need to cram the whole framework

Ready to build?

Let’s generate your first app in just 2 minutes

​
Already have a vite app?

If you already have a React app running on Vite, you can incrementally adopt Hana’s modules into your app. This gives you the flexibility to keep your app working as-is, while slowly switching to all the goodies Hana gives you.

Hana Store

Set up a global store in your application for easy access to data from any component

File Router

Take advantage of file-based routing powered by React Router with no setup

Hana Auth

Let Hana take care of the annoying parts of authentication like middleware & config

Everyday Utils

Install Hana Utils for access to everyday features like caching & data fetching

​
What Hana doesn’t do (by design)

Hana may not be as powerful as other meta-frameworks like Next, but it doesn’t have to be. We carefully crafted Hana, avoiding all the chaos of the modern web out of the box
  • No SSR / SSG because we believe client rendering is sufficient for many apps
  • No server components / hybrid rendering so you control when to fetch / render
  • No hidden abstractions / magic which means everything is explicit, understandable
Hana has worked for us and businesses serving 2M+ customers, so let’s stop overengineering, and start shipping UI 💜