🍝

Tagliatelle.js

Build backend APIs with JSX components.
The framework that makes server code look beautiful.

server.tsx

// Define your server with JSX 🍝
const App = () => (
  <Server port={3000}>
    <Logger level="info">
      <RateLimiter max={100}>
        <DB provider={createDB}>
          <Routes dir="./routes" />
        </DB>
      </RateLimiter>
    </Logger>
  </Server>
);
        

Why Tagliatelle?

Familiar syntax, powerful features, beautiful code.

📦

Component-Based Architecture

Nest middleware naturally. Each component wraps its children, creating a clear request flow.

🗄️

Multi-Database Support

Different routes can use different databases. Perfect for separation of concerns.

📍

File-Based Routing

Routes are files. Dynamic params use [brackets]. Nested folders create nested paths.

routes/ ├── index.tsx → / ├── posts/ │ ├── index.tsx → /posts │ └── [id].tsx → /posts/:id

✨

JSX Responses

Return responses as JSX. Status codes, headers, and body in a declarative format.

return ( <Response> <Status code={200} /> <Body data={{ user }} /> </Response> );

See It In Action

Real code from this demo project.

Route Handler with JSX Response

HTTP methods are exported functions. Return JSX to send responses.

routes/posts/[id].tsx

export async function GET({ params, db }: HandlerProps) { const post = db.posts.findById(params.id); if (!post) { return ( <Response> <Status code={404} /> <Body data={{ error: 'Not found' }} /> </Response> ); } return ( <Response> <Status code={200} /> <Body data={{ success: true, data: post }} /> </Response> ); }

Response 200 OK

{ "success": true, "data": { "id": "post_1", "title": "Getting Started with Tagliatelle.js", "views": 2500, "likes": 145 } }

Middleware Composition

Middleware wraps routes using JSX nesting. Data flows through props.

middleware/auth.ts

export const authMiddleware = async (props, request, reply) => { const token = request.headers.authorization; if (!token) { // Return JSX to halt request return ( <Response> <Status code={401} /> <Body data={{ error: 'Unauthorized' }} /> </Response> ); } // Return data to augment props for downstream return { user: validateToken(token), isAuthenticated: true }; };

Config Files for Route Groups

Use _config.tsx to apply middleware to all routes in a directory.

routes/posts/_config.tsx

import { Middleware } from 'tagliatelle'; import { authMiddleware } from '../../middleware/auth'; // All routes in /posts/* get this middleware export default ({ children }) => ( <Middleware use={authMiddleware}> {children} </Middleware> );