TSX Basics

A minimal page

export default function HomePage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">Hello Zebflow</h1>
    </div>
  );
}

Using pipeline input

When a page is served via a pipeline with web.page, the pipeline output is available as input:

export default function ItemsPage({ input }) {
  const items = input?.items || [];
  return (
    <div className="p-8">
      <h1 className="text-xl font-bold">Items</h1>
      <ul>
        {items.map((item, i) => (
          <li key={i} className="py-1">{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Imports

// Zeb hooks — MUST be explicitly imported in every file
import { useState, useEffect, useMemo } from "zeb";

// Local components — use @/ prefix (template root)
import Button from "@/components/ui/button";
import Card from "@/components/ui/card";

// Zeb libraries
import { Markdown } from "zeb/markdown";
import { CodeEditor } from "zeb/codemirror";

Import rules

• Always import hooks from "zeb" — useState, useEffect, useMemo, useCallback, useRef
• Always use @/ for local imports — never ./ or ../
• Never import from "npm:preact" or "npm:preact/hooks"
• Never call render() manually