Plugins & Packages

The complete Bini.js ecosystem — everything you need to build full-stack React apps for web, desktop, and mobile from one codebase.

Bini.js is built on Vite and aims to provide out-of-the-box support for common web development patterns. Before searching for a plugin, check out the documentation. Many cases where a plugin would be needed in other projects — routing, API routes, env handling, native app wiring — are already covered by the official Bini.js packages below.

Core Framework

The two packages that scaffold and ship a Bini.js project.

create-bini-appOfficial

Build full-stack React apps for web, desktop, and mobile — from one codebase. Scaffolds a complete Vite + React + Hono project with file-based routing, API routes, Tauri native builds, and a deploy script wired in from the first commit.

npm GitHub

bini-deployOfficial

Zero-config deployment for Bini.js projects — web, desktop, and mobile, all from one CLI. Scans your project, generates the right hosting configuration for your target platform, and pushes it straight to GitHub.

npm GitHub

Official Plugins

These plugins are automatically included and configured in every Bini.js project.

bini-routerOfficial

File-based routing, nested layouts, folder-scoped loading/error/404 boundaries, MDX & Markdown pages, and Hono-powered API routes for Vite. Like Next.js App Router, but pure SPA — zero server required.

npm GitHub

bini-envOfficial

Hono-native environment variable system. getEnv(c, key) and requireEnv(c, key) read from the Hono request context, so variables resolve correctly on Node.js, Bun, Deno, Vercel Edge, Netlify Edge, and Cloudflare Workers — with zero dotenv parsing at runtime.

npm GitHub

bini-nativeOfficial

Automatic Tauri plugin wiring for desktop and mobile. Detects the web APIs you call — geolocation, clipboard, notifications, dialogs, and more — and wires Rust plugins, Cargo.toml, capabilities, and Android/iOS manifests. Dev-only; tauri build stays a complete no-op.

npm GitHub

bini-serverOfficial

Zero-dependency, secure-by-default production server for bini-router apps. Streams static files with ETag caching, serves /api/* routes, provides SPA fallback, and adds configurable body/handler timeouts and graceful shutdown.

npm GitHub

bini-overlayOfficial

A Next.js-style error overlay and animated loading badge. Shows your Bini.js logo during development — animates on load and HMR updates, morphs into a clickable error pill on failure, and opens a full panel with stack trace and code frame.

npm GitHub

bini-ssgOfficial

Pre-renders every route — static and dynamic — to static HTML as part of npm run build. Real server-rendered markup with StaticRouter and React 19's renderToPipeableStream, plus shell pages with hydration markers for dynamic routes. No separate export command needed.

npm GitHub

Built-in Vite Plugins

Plugins are added in vite.config.ts under the plugins array:

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { biniroute } from 'bini-router'
import { biniEnv } from 'bini-env'
import { biniSSG } from 'bini-ssg'

export default defineConfig({
  plugins: [
    react(),      // React Fast Refresh
    biniEnv(),    // Environment variable prefixes + dev banner
    ...biniroute(), // File-based routing, MDX compiler & API routes
    biniSSG(),    // Pre-rendering every route to static HTML
    // Add more plugins here
  ],
})

biniroute() returns an array of plugins — the router plugin plus the bundled MDX compiler — so it must be spread with ...biniroute(), not added as a single item.

These Vite plugins are automatically included based on your project configuration:

@vitejs/plugin-react

Provides React Fast Refresh support. Automatically configured in every Bini.js project.

npm

@tailwindcss/vite

Tailwind CSS v4 Vite plugin. Zero-config — just works. Included when you select Tailwind during project creation.

npm

Compatible Community Plugins

Bini.js is compatible with most Vite and Rollup plugins. Here are some popular ones:

vite-plugin-pwa

Zero-config PWA plugin. Adds service worker and manifest support for offline capabilities.

npm

vite-plugin-svgr

Transform SVGs into React components. Import SVGs directly as components.

npm

vite-plugin-compression

Compress your bundle with Gzip or Brotli. Reduces bundle size for faster loading.

npm

rollup-plugin-visualizer

Visualize and analyze your bundle. See which packages take up the most space.

npm

Most Vite plugins work with Bini.js. Check the Awesome Vite list for more community plugins.

Hono Middleware & Plugins

Bini.js uses Hono for API routes. You can use any Hono middleware in your src/app/api/ files.

hono/cors

Cross-Origin Resource Sharing middleware for Hono. bini-router and bini-server already enable permissive CORS by default — use this when you need finer-grained control.

npm

hono/jwt

JWT authentication middleware. Protect your API routes with JSON Web Tokens.

npm

hono/logger

Simple logging middleware. Log incoming requests with method, path, and response time.

npm

@hono/zod-validator

Zod validation middleware for Hono. Validate request body, query, and headers with Zod schemas.

npm

All Hono middleware works in Bini.js API routes. Import them directly from hono or install additional packages like @hono/zod-validator. See the Hono middleware documentation for the complete list.

Example of using Hono middleware together with bini-env in an API route:

src/app/api/secure.ts

import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { logger } from 'hono/logger'
import { getEnv, requireEnv } from 'bini-env'

const app = new Hono()

app.use('*', cors())
app.use('*', logger())

app.get('/', async (c) => {
  const ctx = c as any

  // requireEnv throws if the var is missing — fail fast on required config
  const apiKey = requireEnv(ctx, 'API_SECRET')

  // getEnv returns undefined if missing — use ?? for a default
  const appName = getEnv(ctx, 'APP_NAME') ?? 'Bini.js'

  return c.json({ message: `API with middleware, ${appName}` })
})

export default app