Welcome to Loly

A modern, full-stack React framework with production-ready realtime communication, route-level middlewares, and enterprise-grade features.

Get Started View on npm

Powerful Features

Everything you need to build modern web applications

Production-Ready Realtime

Built-in Socket.IO integration with authentication, validation, rate limiting, and multi-instance support.

Route-Level Middlewares

Define middlewares directly in your routes for fine-grained control over pages and APIs.

File-Based Routing

Automatic route creation from your file structure. Simple, intuitive, and powerful.

Hybrid Rendering

Choose the best rendering strategy: SSR, SSG, or CSR. Optimize for performance and SEO.

Security First

Built-in rate limiting, validation, sanitization, and security headers. Production-ready out of the box.

Performance

Fast bundling with Rspack and optimized code splitting. Build faster, ship faster.

New Feature

MCP Server Integration

Access Loly documentation and tools directly from your AI assistant

Get Started in Seconds

Create your first Loly application with just a few commands

Create a new Loly application

npx @lolyjs/cli@latest my-app

cd my-app

Create Your First Page

app/page.tsx

export default function Home() {
  return <h1>Hello, Loly!</h1>;
}

Build the application

npm run build

Start Development Server

npm run dev

Read Full Documentation

See It In Action

Real examples of Loly in action

Server-Side Data Fetching

Fetch data on the server and pass it to your components.

app/page.server.hook.ts

import type { ServerLoader } from "@lolyjs/core";

export const getServerSideProps: ServerLoader = async (ctx) => {
  const data = await fetchData();
  
  return {
    props: { data },
    metadata: {
      title: "Home Page",
      description: "Welcome to Loly",
      openGraph: {
        title: "Home Page",
        description: "Welcome to Loly",
        type: "website",
      },
    },
  };
};

app/page.tsx

export default function Home({ props }: { props: { data: string } }) {
  return <h1>{props.data}</h1>;
}

API Routes

Create RESTful APIs with built-in validation and middleware support.

app/api/posts/route.ts

import type { ApiContext } from "@lolyjs/core";
import { validate } from "@lolyjs/core";
import { z } from "zod";

const postSchema = z.object({
  title: z.string().min(1),
  content: z.string().min(1),
});

export async function GET(ctx: ApiContext) {
  const posts = await getPosts();
  return ctx.Response({ posts });
}

export async function POST(ctx: ApiContext) {
  const data = validate(postSchema, ctx.req.body);
  const post = await createPost(data);
  return ctx.Response({ post }, 201);
}

Realtime Events

Production-ready realtime communication with authentication, validation, and rate limiting.

app/wss/chat/events.ts

import { defineWssRoute } from "@lolyjs/core";
import { z } from "zod";

export default defineWssRoute({
  auth: async (ctx) => {
    const token = ctx.req.headers.authorization?.replace("Bearer ", "");
    return token ? await verifyToken(token) : null;
  },
  
  events: {
    message: {
      schema: z.object({
        text: z.string().min(1).max(500),
      }),
      guard: ({ user }) => !!user,
      handler: (ctx) => {
        ctx.actions.broadcast("message", {
          text: ctx.data.text,
          from: ctx.user?.id,
        });
      },
    },
  },
});

Client-side

import { lolySocket } from "@lolyjs/core/sockets";

const socket = lolySocket("/chat", {
  auth: { token: "your-jwt-token" },
});

socket.on("message", (data) => {
  console.log("Received:", data);
});

socket.emit("message", { text: "Hello!" });