English | 中文

VioletJS is a modern full-stack React framework powered by Vite, featuring SSR/SSG support with built-in database, authentication, type-safe APIs, and comprehensive tooling.

• Features
• Quick Start
• Documentation
• Why VioletJS?
• Contributing
• License & Support
• Acknowledgments

• Full-Stack: SSR, SSG, ISR, SPA with Express + Vite
• Runtime: Bun (fast JavaScript runtime)
• Database: Drizzle ORM with SQLite
• Auth: Auth.js
• API: oRPC type-safe client/server
• UI: Radix UI + Tailwind CSS + shadcn/ui
• i18n: Lingui
• Theme: Light/Dark + custom palettes
• PWA: Vite PWA plugin with auto-update
• State: Zustand + SWR + Immer
• Forms: React Hook Form + Zod validation
• Testing: Vitest
• Linting: Biome
• Deploy: Docker + standalone builds

Prerequisites: Install Bun.

# 1. Install dependencies
bun ci

# 2. Environment setup
cp .env.example .env

# 3. Start development server
bun dev

The development server will be running at http://localhost:3000.

Note: Documentation is currently in development. Explore the codebase and inline comments for implementation details.

While Next.js offers powerful functionality, its black-box nature and tight Vercel integration can be limiting. VioletJS provides a comprehensive, lightweight, and transparent alternative with full control over your application.

No hidden magic or complex conventions. Built with Vite and Express, everything is customizable and easy to understand.

Route-based server-side data loading with nested routes and middleware support:

// src/routes-server.tsx
{
  path: "post/list",
  ssrHandle: async ({ ssrData }) => {
    ssrData.swrFallback["/post/list"] = await call(getPosts, null);
  },
}

Generate static pages automatically with on-demand updates:

// src/routes-server.tsx
{
  path: "post/:post_id",
  ssg: true,
  isr: true,
}

// Regenerate static pages after data updates
function updatePost(id, title, content) {
  // Update data...
  updatePageCaches(["/post/list", `/post/${id}`]);
}

Use SWR for data fetching with automatic SSR data and client-side caching:

import useSWR from "swr";
import { orpc } from "@/lib/orpc-client";

export default function PostListPage() {
  const { data: posts, mutate } = useSWR(
    "/demo/post/list",
    orpc.demo.post.getPosts
  );

  return (
    <div>
      {posts?.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Support Channels:

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions

VioletJS is built on top of these amazing open-source projects:

• Vite - Lightning-fast build tool
• React - UI library
• Express - Web framework
• Drizzle - TypeScript ORM
• Auth.js - Authentication
• oRPC - Type-safe RPC
• Tailwind CSS - Utility-first CSS
• Radix UI - Headless UI components
• Bun - Fast JavaScript runtime