laroux 3.0
Zero-configuration React Server Components on Deno 2.x. Modern, simple, and built with cutting-edge technology.
Why laroux?
No config files, no setup — just start building
Native TypeScript, security by default, all-in-one tooling
Type-safe server components with direct backend access
Progressive loading, optimized builds, and tree-shaking
Styling, server actions, and more — all built-in
✓ Production-ready • 37+ passing tests
Streaming
React 19.x's Suspense boundaries enable progressive rendering. The page shows content immediately while slower components stream in. Users see immediate feedback instead of waiting for everything to load.
Benefits:
- Show content immediately, load slow parts later
- Better perceived performance
- Parallel data fetching
- Graceful loading states
Streaming Demo
Instant Component
This rendered immediately with no delay
Loading slow data (10s)...
Streaming from server...
Loading more data (20s)...
Streaming from server...
Loading more data (40s)...
Streaming from server...
Server Actions
use server — no API endpoints needed.Server Actions are asynchronous functions that run on the server. They're called from Client Components but execute on the server, eliminating the need for API routes. Mark them with the"use server"directive.
Use Cases:
- Form submissions and data mutations
- Database operations
- Server-side validation
- No need to create API endpoints manually
Server Components
async/await — fetched data never touches client bundle.Server Components run only on the server and never ship to the client. They can access databases, read files, and perform other server-side operations directly. Their code doesn't add to your JavaScript bundle size.
Key Benefits:
- Zero client bundle impact - code stays on the server
- Direct access to backend resources (databases, filesystems, APIs)
- Automatic code splitting without manual configuration
- Can use async/await for data fetching
Island Architecture
use client directive with useState for browser interactivity.Island Architecture makes marked components to be interactive and run in the browser. These components use React hooks likeuseStateand can respond to user interactions. Mark them with the"use client"directive at the top of the file.
When to Use:
- Interactive UI elements (buttons, forms, modals)
- Browser APIs (localStorage, geolocation, etc.)
- State management with hooks
- Event handlers and user input
Styling
.module.css scoped styles, Tailwind utilities, and native nesting.laroux provides a complete styling solution combining CSS Modules, Tailwind CSS, and Lightning CSS. Write scoped component styles with native CSS nesting syntax, or use Tailwind utilities - or mix both! Automatic tree-shaking removes unused CSS for optimal bundle sizes.
Features:
- CSS Modules with scoped class names
- Native CSS nesting (no preprocessor needed)
- Tailwind utilities with automatic tree-shaking
- Lightning CSS for ultra-fast processing
- Optional TypeScript .d.ts generation
- Advanced minification and optimization
CSS Modules
CSS Modules provide scoped class names that prevent global namespace conflicts. Each class name is automatically hashed and isolated to this component.
Tailwind 4.x
Tailwind CSS utilities can be used alongside CSS modules. Only used utilities are included in the final bundle thanks to automatic tree-shaking.
CSS Nesting
Native CSS nesting is supported. No additional preprocessor or plugin needed! Use the & parent selector for cleaner, more maintainable styles.