Overview — Introduction

Introduction

Lumen is a lightweight web framework designed for building modern applications. It provides a minimal, expressive API that gets out of your way and lets you focus on building your product.

Key Features

• —Zero-config development server with hot reload
• —File-based routing with dynamic segments
• —Built-in data fetching with automatic caching
• —First-class TypeScript support
• —Tiny runtime footprint (under 8kb)

Quick Example

Here is a minimal example showing how to define a route and fetch data.

Defining Routes

import { defineRoute } from 'lumen';

export default defineRoute({
  path: '/',
  loader: async () => {
    const posts = await db.posts.findMany();
    return { posts };
  },
  component: ({ data }) => (
    <ul>
      {data.posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  ),
});

Fetching Data

import { query } from 'lumen/data';

export const getUser = query(
  async (id: string) => {
    return await fetch(`/api/users/${id}`)
      .then(res => res.json());
  },
  { cache: '5m' }
);

Requirements

Community

Join our growing community of developers building with Lumen. Get help, share ideas, and contribute to the framework.