Kitab

Kitab (كتاب — Arabic for "book") is an open-source, Framer-style visual page builder. Create beautiful, responsive websites with a drag-and-drop editor featuring real-time styling, 60+ pre-built components, advanced animations, and HTML export.

---

Features

• Visual Editor — Drag-and-drop canvas with real-time preview
• 17 Element Types — Section, container, flex, grid, columns, heading, text, image, button, icon, video, divider, spacer, link-block, form, code-embed, marquee
• 60+ Pre-built Components — Navbars, heroes, features, testimonials, pricing, FAQ, galleries, CTAs, footers, and more
• Advanced Animations — CSS animations + GSAP: text reveal, counters, parallax, scroll pin, stagger grid
• Responsive Design — Edit each breakpoint independently (desktop, tablet, mobile)
• Draw-to-Insert — Press F to draw rectangles on canvas, creating positioned elements
• HTML Export — Export pages as standalone HTML with styles, fonts, animations
• AI Content Generation — Generate text and SEO content with Anthropic, OpenAI, or Ollama
• Multi-site — Manage multiple sites from a single dashboard
• Templates — 8 starter templates (Agency, Portfolio, SaaS, Restaurant, etc.)
• Global Styles — Site-wide fonts, colors, spacing tokens
• Version History — Save and restore page snapshots
• Keyboard Shortcuts — Full shortcut system (Ctrl+Z/Y/D/G/S, arrows, etc.)
• Self-hosted — Deploy anywhere with Docker

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Database	SQLite via Prisma 7 + libSQL
State	Zustand + Immer
Styling	Tailwind CSS 4
UI	shadcn/ui
Auth	Auth.js (NextAuth)
Animations	GSAP + CSS
AI	Anthropic / OpenAI / Ollama

Quick Start

Prerequisites

• Node.js 20+
• npm or pnpm

Setup

# Clone the repository
git clone https://github.com/Santofer/kitab.git
cd kitab

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Generate Prisma client and create database
npx prisma generate
npx prisma db push

# Seed the database (creates admin user + demo site)
npx tsx prisma/seed.ts

# Start development server
npm run dev

Open http://localhost:3000 and log in with the credentials shown in the seed output (default: admin@kitab.dev / changeme).

Docker Deployment

# Copy and configure environment
cp .env.example .env
# Edit .env with your settings (especially NEXTAUTH_SECRET)

# Build and run
docker compose up -d

The app will be available at http://localhost:3020.

Environment Variables

Variable	Description	Default
DATABASE_URL	SQLite database path	file:./dev.db
NEXTAUTH_URL	Public URL of the app	http://localhost:3000
NEXTAUTH_SECRET	Auth.js secret (generate with openssl rand -base64 32)	—
ADMIN_EMAIL	Admin email for seed script	admin@kitab.dev
ADMIN_PASSWORD	Admin password for seed script	changeme
ADMIN_HOSTNAME	Hostname for admin panel	localhost:3000
BASE_DOMAIN	Base domain for subdomains	localhost
SITE_BASE_DOMAIN	Domain for site subdomains	same as BASE_DOMAIN
NEXT_PUBLIC_SITE_DOMAIN	Client-side domain for URLs	localhost
SMTP_*	SMTP settings for form submissions	—
ANTHROPIC_API_KEY	Anthropic API key for AI features	—
OPENAI_API_KEY	OpenAI API key for AI features	—
OLLAMA_BASE_URL	Ollama server URL for local AI	—
PEXELS_API_KEY	Pexels API key for stock photos	—

Project Structure

src/
  types/              # TypeScript types (EditorNode, PageDocument, etc.)
  stores/             # Zustand stores (editor state, undo/redo)
  lib/                # Core libraries
    element-registry  # Element type registry
    component-library # Pre-built component definitions
    starter-templates # Page templates
    google-fonts      # Google Fonts integration
  components/
    editor/           # Editor UI (toolbar, panels, canvas)
      panels/         # Style panel, elements, components, navigator
      canvas/         # Editor canvas, draw overlay, grid
    elements/         # Element renderers (17 types)
    public/           # Public site rendering
    shared/           # Admin layout components
  app/
    (admin)/          # Admin dashboard routes
    (auth)/           # Login & registration
    (builder)/        # Page editor
    api/              # API routes
    site/             # Public site rendering
  hooks/              # Custom hooks (keyboard, auto-save)
prisma/
  schema.prisma       # Database schema
  seed.ts             # Database seeder

Keyboard Shortcuts

Shortcut	Action
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+D	Duplicate element
Ctrl+G	Group elements
Ctrl+S	Save page
Ctrl+C/V	Copy/paste styles
Ctrl+Shift+C/V	Copy/paste sections
Delete	Delete element
Enter	Select first child
Escape	Select parent
F	Toggle draw-to-insert mode
Arrow keys	Nudge element (1px)
Shift+Arrows	Nudge element (10px)

Contributing

See CONTRIBUTING.md for development setup and guidelines.

License

MIT — built with love by Santofer.