page-builder

Page Builder Patterns

Universal patterns for building pages. These apply to both public-facing and admin pages.

When to Use

• Building list pages with filtering, search, pagination
• Building detail/edit pages with forms
• Rendering mixed-type feeds or lists
• Any page that fetches and displays data

Core Principle

Remote-First: Put logic in data.remote.ts, keep pages as pure renderers.

See using-remote-functions/REMOTE-FIRST.md for the full pattern.

Page Types

Type	Purpose	Reference
List Page	Display items with filters/search	LIST-PAGE.md
Detail Page	View/edit single item with form	DETAIL-PAGE.md
Feed Page	Mixed-type items with components	FEED-PAGE.md

Route Structure

src/routes/
└── [section]/
    ├── +page.svelte          # List page
    ├── data.remote.ts        # Remote functions (queries, forms)
    └── [slug]/
        └── +page.svelte      # Detail page

Key Patterns

1. Component Mapping

Map data types to components for clean rendering:

<script>
  const components = new Map([
    ['article', ArticleCard],
    ['video', VideoCard],
    ['cta', CTABanner]
  ])
</script>

{#each items as item, index (index)}
  {@const Component = components.get(item.type)}
  <Component {...item.props} />
{/each}

2. Filter Forms (Auto-Submit)

Native forms that update URL params on input:

<script>
  let form: HTMLFormElement
  function submitForm() { form.requestSubmit() }
  function debouncedSubmit() {
    clearTimeout(timer)
    timer = setTimeout(submitForm, 300)
  }
</script>

<form bind:this={form}>
  <input name="search" oninput={debouncedSubmit} />
  <select name="status" onchange={submitForm} />
</form>

3. Form Initialization

Populate forms with existing data:

<script>
  import { initForm } from '$lib/utils/form.svelte'

  initForm(updateItem, () => ({
    id: item.id,
    name: item.name ?? '',
    status: item.status ?? 'draft'
  }))
</script>

4. Pagination

<script>
  import Pagination from '$lib/ui/Pagination.svelte'
</script>

<Pagination count={totalItems} perPage={20} />

Form Components

Component	Purpose
Input	Text, email, password inputs with validation
Textarea	Multi-line text with validation
Select	Dropdown with options
Checkbox	Boolean toggle

All accept:

• label - Field label
• description - Helper text
• issues - Validation errors from field.issues()
• ...rest - Spread from field.as('type')

Remote Function Patterns

Query with Filters

const filtersSchema = z.object({
	search: z.string().catch(''),
	status: z.string().catch(''),
	page: z.number().catch(1)
})

export const getItems = query('unchecked', async (searchParams: URLSearchParams) => {
	const { locals } = getRequestEvent()
	const filters = parseSearchParams(filtersSchema, searchParams)
	return locals.service.getFiltered(filters)
})

Form with Validation

export const updateItem = form(
	z.object({
		id: z.string(),
		name: z.string().min(1, 'Required'),
		status: z.enum(['draft', 'published'])
	}),
	async (data) => {
		const { locals } = getRequestEvent()
		await locals.service.update(data.id, data)
		return { success: true }
	}
)

Reference Files

• LIST-PAGE.md - Full list page patterns
• DETAIL-PAGE.md - Form and detail patterns
• FEED-PAGE.md - Mixed-type feed rendering