Documentation

Get Started

Build full-stack React apps with Diezel.

Quick Start

pnpm create diezel my-app

cd my-app && pnpm dev

Then openlocalhost:3000

Project Structure

src/
├── app/           # File-based routes
│   ├── layout.tsx # Root layout
│   ├── page.tsx   # Home (/)
│   └── about/
│       └── page.tsx
├── actions/       # Server actions
├── components/    # React components
├── api/           # API routes
└── db/            # Database

Pages

Server Components by default. Create page.tsx to add routes.

src/app/users/page.tsx

export default async function UsersPage() {
  const users = await db.select().from(usersTable)

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Layouts

Wrap pages with shared UI using layout.tsx.

src/app/layout.tsx

export default function RootLayout({ children }: LayoutProps) {
  return (
    <html lang="en">
      <head><title>My App</title></head>
      <body>
        <nav>...</nav>
        <main>{children}</main>
      </body>
    </html>
  )
}

Server Actions

Call server functions from client components.

src/components/form.tsx

'use client'
import { createUser } from '@/actions/users'

export function UserForm() {
  return (
    <form action={createUser}>
      <input name="name" />
      <input name="email" />
      <button>Create</button>
    </form>
  )
}

src/actions/users.ts

'use server'

export async function createUser(name: string, email: string) {
  return await db.insert(users).values({ name, email }).returning()
}

Client Components

Add 'use client' for interactivity.

src/components/counter.tsx

'use client'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
}

API Routes

Build REST APIs at /api.

src/api/index.ts

import { Hono } from 'hono'

const app = new Hono()

app.get('/users', async (c) => {
  const users = await db.select().from(usersTable)
  return c.json(users)
})

app.post('/users', async (c) => {
  const body = await c.req.json()
  const user = await db.insert(usersTable).values(body).returning()
  return c.json(user, 201)
})

export default app

Database

Use Drizzle ORM with SQLite, Postgres, or MySQL.

src/db/schema.ts

import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'

export const users = sqliteTable('users', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
})