Getting Started

Welcome to the Bini.js documentation.

What is Bini.js?

Bini.js is a React framework for building full-stack applications that run natively across web, desktop, and mobile - all from a single codebase. You use React components to build user interfaces, and Bini.js handles the complexity of multi-platform deployment.

It automatically configures lower-level tools while providing a seamless path to native apps. You can focus on building your product and shipping quickly, without worrying about the underlying platform differences.

Whether you're building a web app, a desktop application for Windows, macOS, or Linux, or a mobile app for Android and iOS - Bini.js gives you the tools to do it all from one project.

Native Apps from a Single Codebase

Bini.js goes beyond the browser. With Tauri integration, your React app becomes a real native application on every major platform - not a wrapped web view.

Desktop Apps

  • -Windows - Native WebView2 binary with Authenticode signing
  • -macOS - Native WKWebView app with Developer ID notarization
  • -Linux - Native WebKitGTK binary as a GPG-signed AppImage

Mobile Apps

  • -Android - Native APK/AAB via Tauri's Android backend
  • -iOS - Native app via Tauri's iOS backend, running in WKWebView
Real Native

Not wrapped - compiled to native binaries with full system access

Auto Plugin Wiring

bini-native detects web APIs you call and wires Rust plugins automatically

One Codebase

Same routes, API handlers, and components compile to every target

How to use the docs

The docs are organized into nine sections:

  • Getting Started: Installation, project structure, layouts and pages, and linking and navigating between routes
  • Defining Routes: Folder-based and file-based routing, dynamic routes, parallel routes, catch-all routes, and MDX & Markdown pages
  • Special Files: Loading UI, error boundaries, templates, default fallbacks, and not-found (404) pages
  • Metadata: Metadata and SEO, Open Graph and Twitter cards, icons and favicons
  • API Routes: Build backend endpoints with plain function handlers or Hono, including dynamic API routes and CORS
  • Environment Variables: How they work, prefixes and client exposure, and using them in API routes
  • Styling: Style your app with plain CSS, Tailwind CSS, or CSS Modules
  • Platforms: Build for web, Windows, macOS, Linux, Android, and iOS
  • Deployment: Deployment overview, the production server, static export, and hosting providers

Bini.js Router

Bini.js has a file-system based router built on folder and file conventions:

  • Folder-based routing: Folders define URL segments, and nesting folders creates nested routes automatically.
  • File-based routing: Special files like page.tsx and layout.tsx define the UI for a route.

You can start learning the router from the Routing documentation.

Pre-requisite knowledge

Our documentation assumes some familiarity with web development. Before getting started, it'll help if you're comfortable with:

  • HTML
  • CSS
  • JavaScript
  • React

If you're new to React or need a refresher, we recommend starting with the React documentation.

Join our Community

If you have questions about anything related to Bini.js, you're always welcome to ask our community on:

GitHubLinkedInRedditDiscord
Was this helpful?