Skip to main content

​
One Server Philosophy

One server. One deployment. Zero complexity. Unlike other platforms where you build locally and deploy separately, tinykit runs the builder AND your app on the same server. Edit at /tinykit, ship at /.

​
URL Structure

Your tinykit instance serves everything from a single domain: 
tinykit Server (Railway)
├── /tinykit/dashboard  → Project list (you)
├── /tinykit/studio     → Edit current domain's app (you)
├── /                   → Your generated app (users)
├── /api/agent          → AI endpoints
├── /api/projects       → Project operations
└── /_pb/_              → PocketBase admin
PathPurposeWho Uses It
/Your generated appEnd users
/tinykit/dashboardList all projectsYou (developer)
/tinykit/studioEdit app for current domainYou (developer)
/tinykit/studio?id=XEdit specific projectYou (developer)
/api/agentAI code generationBuilder
/_pb/_PocketBase adminYou (optional)

​
Domain-Based Routing

Run hundreds of apps from one tinykit instance. Each domain serves a different app: 
calculator.myserver.com/           → Serves calculator app
calculator.myserver.com/tinykit    → Edit calculator app

blog.myserver.com/                 → Serves blog app
blog.myserver.com/tinykit          → Edit blog app

recipes.myserver.com/              → Serves recipes app
recipes.myserver.com/tinykit       → Edit recipes app
How it works:
  1. Point multiple domains to your tinykit server
  2. Each domain is associated with a project in PocketBase
  3. Root URL (/) serves the pre-built HTML for that domain’s project
  4. /tinykit lets you edit the project for the current domain
Unknown domains redirect to /tinykit/new?domain=X to create a new project.

​
Tech Stack

SvelteKit

Fast, modern framework for the builder and generated apps

CodeMirror 6

Modern code editor with syntax highlighting and autocomplete

OpenAI / Anthropic / Gemini

Your choice of AI provider for code generation

PocketBase

Embedded database for data persistence

Tailwind CSS

Utility-first styling for rapid UI development

TypeScript

Type safety throughout the codebase

​
Data Storage

All project data is stored in a single PocketBase collection (_tk_projects): 
_tk_projects
├── frontend_code    → Code (your app's code)
├── content          → Content fields (JSON)
├── design           → CSS variables (JSON)
├── agent_chat       → Conversation history (JSON)
├── snapshots        → Time travel history (JSON)
├── data             → App data collections (JSON)
├── domain           → Associated domain
└── published_html   → Compiled HTML (production build)
Everything in one collection means simple backups and easy migrations.

​
Data Flow

1

You Chat with AI

Send a prompt like “Create a todo list app” to the AI Agent panel.
2

AI Generates Code

The AI responds with code, which streams to your browser in real-time.
3

Files are Saved

Generated code is saved to the project’s frontend_code field.
4

Preview Updates

The live preview compiles and shows your changes immediately.
5

Build for Production

Server compiles Svelte to standalone HTML, saves as static file.
6

Users See Changes

Anyone visiting your root URL sees the updated app instantly.

​
Build System

Preview uses in-browser Svelte compilation for instant feedback. Production uses server-side compilation:
  • Svelte 5’s native compile() function
  • Generates standalone HTML with CDN-based imports
  • Triggered by clicking “Deploy” button
  • Result stored as file attachment in PocketBase

​
AI Agent System

The AI agent uses a tool-use pattern to build your app: 
You: "Add a contact form"
         │
         ▼
┌─────────────────────────────┐
│  LLM receives:              │
│  - Your prompt              │
│  - Current code       │
│  - Design/content fields    │
│  - Conversation history     │
└─────────────────────────────┘
         │
         ▼
┌─────────────────────────────┐
│  LLM calls tools:           │
│  - write_code               │
│  - create_design_field      │
│  - create_content_field     │
│  - create_data_file         │
└─────────────────────────────┘
         │
         ▼
┌─────────────────────────────┐
│  Tools execute              │
│  Results fed back           │
│  Loop until done            │
└─────────────────────────────┘
         │
         ▼
    Response streamed to you

​
Available Tools

ToolWhat It Does
write_codeUpdates app code
create_design_fieldAdds CSS variables (colors, fonts)
create_content_fieldAdds CMS fields (text, images)
create_data_fileCreates data collections
insert_recordsSeeds data into collections
update_specUpdates project metadata

​
Performance

OperationTypical Time
Editor load~100-200ms
File save~50-100ms
Preview refresh~100-200ms
AI response~2-5s (depends on model)
Production build~500ms-2s

​
Deployment Options

While Railway is recommended for simplicity, you can deploy anywhere that runs Node.js: 
fly launch
fly secrets set LLM_API_KEY=sk-...
fly deploy
Connect your GitHub repo and configure environment variables in the dashboard.
git clone https://github.com/tinykit-studio/tinykit.git
cd tinykit
npm install
npm run build
npm run preview
Use PM2 or systemd to keep it running.
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install && npm run build
CMD ["npm", "run", "preview"]