# @olan-app/sdk — Olan Apps SDK (llms.txt) > One-file digest of node_modules/@olan-app/sdk/docs/*.md (generated; edit the docs instead). > Olan Apps are React + TypeScript running in a sandbox; UI = the 23 SDK components, data = permission-checked olan.* calls. > Done = `npx olan-app validate --strict` and `npx olan-app test` both pass. # Getting started An Olan App is a small React program that runs in a sandbox (a Web Worker on web/desktop, an isolated JS engine on mobile). It does not draw anything itself: it describes its screen with the components of `@olan-app/sdk`, and Olan draws them with its own native controls on every platform. Data comes from `olan.*` calls that Olan answers after checking the app's permissions. Formerly @olan/app-sdk; the old name still builds. ## Create an app ```sh npx olan-app init "Geciken görevler" --template list-detail # or: olan app init … cd geciken-gorevler npm install npx olan-app validate --strict npx olan-app test npx olan-app dev # serve it to Olan Studio (Geliştirme sunucuları) ``` Templates: `blank` (one screen), `list-detail` (projects → tasks → task), `project-widget` (a card on the project page), `project-tab` (a project tab and project settings with `olan.project.config`), `project-records` (the app's records on tasks: a task action, a record card, the app's status, calendar items, feed lines, approvals and a project template; SDK 1.7), `external-api` (`olan.http.fetch` with an `http:` permission), `data-list` (`olan.db`), `backend` (`--backend`: UI + backend code that Olan runs, backend.md). ## Project layout ``` olan-app.json manifest: id, name, version, surfaces, permissions, settings (manifest.md) src/app.tsx the app; must `export default defineApp({ ... })` tests/*.test.ts headless tests (node:test + @olan-app/cli/testing) (testing.md) fixtures/*.json mock data for tests, validate --strict and dev (testing.md#fixtures) assets/icon.png icon referenced by the manifest dist/app.js build output (generated, git-ignored) AGENTS.md, CLAUDE.md instructions for coding agents ``` ## The smallest app ```tsx import { useState } from 'react'; import { Button, Screen, Stack, Text, defineApp, olan } from '@olan-app/sdk'; function Home() { const [count, setCount] = useState(0); return (