---
title: An app's shape
description: The folders a Sluurp app is made of, and what each becomes.
section: Start
order: 2
---

# An app's shape

<p class="lead">An app is a folder. The folder a file is in decides what it does, so there is no config to write.</p>

```text title="my-app/"
index.html         # a page the browser loads as it is
pages/  app.tsx    # browser modules, TypeScript compiled as served
routes/            # server-drawn pages: docs/sync.md is /docs/sync
islands/           # components a server page hands to the browser
functions/         # /api/fn/<name>, run in the sandbox
hooks/             # <collection>.ts: beforeCreate, beforeUpdate…
jobs/              # on a schedule: schedule = "0 7 * * *"
agents/            # watch a collection, act on each change
views/             # live views: state on the server
i18n.json          # the app's words, in every language
sluurp-deps.json   # packages from sluurp add, with their hashes
vendor/            # those packages' sources
schema.json        # its collections, fields and rules
```

## Where server code runs

Functions, hooks, jobs, agents, views and server pages run in a QuickJS sandbox. It has no file system, no network and no `process`, and each call has a memory ceiling and a deadline. Server code reaches data only through `server`, the same collections API the browser has. It acts as the caller, so every rule still applies.

A server file may import the app's own modules by relative path (`../lib/marks.ts`, `./room`, a folder's `index.ts`) and JSON files. Sluurp bundles them, from wherever the file itself was read, into the one module the sandbox runs. The sandbox gains no new access.

## Several apps, one server

```sh title="Terminal"
sluurp serve --public ./school --public reports=./reports --public wiki=./wiki
```

The first app is served at `/`. Each named one is served at its own path (`/reports/`, `/wiki/`), with its own functions and jobs.

## The UI kit

`sluurp/kit` is a set of components in the shadcn style: Button, Card, Dialog, Select, Tabs, Table, Command and Sidebar among them. They are built on `sluurp/ui`, a small signals-and-JSX runtime. Tailwind classes work without a build step, because the stylesheet is generated from the classes the app uses. See [UI kit](/docs/ui-kit) for every component, and to try them.