> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tinykit.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Features

> Overview of tinykit builder capabilities

The builder interface provides tools for code generation, manual editing, and configuration.

<Frame caption="The tinykit builder interface">
  <img src="https://mintcdn.com/tinykit/Tf0C1lubauRtpCSg/images/screenshot-kanban.png?fit=max&auto=format&n=Tf0C1lubauRtpCSg&q=85&s=bb6768a5b380a5a276159b04be935847" alt="Builder interface overview" width="2880" height="1636" data-path="images/screenshot-kanban.png" />
</Frame>

## AI Agent

The AI Agent generates and modifies code based on natural language prompts. It accesses project context, including existing code and configuration fields, to make informed changes.

<Frame caption="AI Agent panel">
  <img src="https://mintcdn.com/tinykit/Tf0C1lubauRtpCSg/images/screenshot-hn-agent.png?fit=max&auto=format&n=Tf0C1lubauRtpCSg&q=85&s=bf2451d463ee9986f1bda760a32c9c51" alt="AI Agent panel" width="2876" height="1632" data-path="images/screenshot-hn-agent.png" />
</Frame>

**Capabilities:**

* **Component Generation**: Creates Svelte app from descriptions.
* **Code Modification**: Updates existing files and logic.
* **Debugging**: Analyzes and fixes errors.
* **Field generation/integration**: Creates and integrates content and design fields with the app code.
* **Data Integration**: Sets up data collections and subscriptions.

## Code Editor

A CodeMirror 6-based editor allows for direct code manipulation.

<Frame caption="Code Editor panel">
  <img src="https://mintcdn.com/tinykit/Tf0C1lubauRtpCSg/images/screenshot-canvas-code.png?fit=max&auto=format&n=Tf0C1lubauRtpCSg&q=85&s=cd3213486d68c5a6918fd20e4fb43d6e" alt="Code Editor panel" width="2880" height="1636" data-path="images/screenshot-canvas-code.png" />
</Frame>

**Features:**

* Syntax highlighting (Svelte, JS, CSS, HTML).
* Live auto-save and preview sizing.
* Standard keyboard shortcuts (Cmd+S to save, Cmd+F to find).

## Live Preview

The preview pane displays the running application in a sandboxed iframe. Changes are reflected immediately upon save or generation.

## Content Fields

Content fields decouple text content from code, allowing updates without code deployment.

<Frame caption="Content Fields panel">
  <img src="https://mintcdn.com/tinykit/Tf0C1lubauRtpCSg/images/screenshot-landing-content.png?fit=max&auto=format&n=Tf0C1lubauRtpCSg&q=85&s=9710d9a5eb18b372855bf5f38505756f" alt="Content Fields panel" width="2880" height="1636" data-path="images/screenshot-landing-content.png" />
</Frame>

* **Usage**: Fields are referenced in code (e.g., `content.title`).
* **Types**: Text, Textarea, Number, Boolean, Image, Markdown.

## Design System

Design tokens are managed via CSS variables, accessible through the Design panel.

<Frame caption="Design System panel">
  <img src="https://mintcdn.com/tinykit/Tf0C1lubauRtpCSg/images/screenshot-event-design.png?fit=max&auto=format&n=Tf0C1lubauRtpCSg&q=85&s=f1e49cae096829e56f8fcccb184da0a4" alt="Design System panel" width="2880" height="1636" data-path="images/screenshot-event-design.png" />
</Frame>

* **Usage**: Variables are used in CSS (e.g., `var(--color-primary)`).
* **Types**: Color, Font, Size, Radius, Shadow.

## Database

A built-in PocketBase instance manages data persistence.

<Frame caption="Database panel">
  <img src="https://mintcdn.com/tinykit/Tf0C1lubauRtpCSg/images/screenshot-memos-data.png?fit=max&auto=format&n=Tf0C1lubauRtpCSg&q=85&s=cf7074a241ead6ba2ec7ba0caa3d7fd2" alt="Database panel" width="2880" height="1638" data-path="images/screenshot-memos-data.png" />
</Frame>

* **Integration**: Local PocketBase instance running alongside the app.
* **Access**: Admin UI available at `/_pb/_`.
* **Realtime**: App data subscriptions set up automatically by the agent.

## Snapshots

The system automatically creates snapshots for every AI generation iteration. Users can also manually create snapshots to version the state.

## Multi-App Routing

tinykit supports serving multiple applications from a single instance using domain-based routing.

**How it works:**

```
recipes.yourserver.com/        → Serves recipe app
recipes.yourserver.com/tinykit → Edit recipe app

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

calculator.yourserver.com/     → Serves calculator app
...
```

Point any domain to your tinykit server, and it automatically serves the right app.

***

## Starter Templates

14 templates included to jumpstart your projects:

| Category         | Templates                          |
| ---------------- | ---------------------------------- |
| **Productivity** | Kanban, Notes, Canvas, Timer       |
| **Finance**      | Expense tracker, Invoice generator |
| **Content**      | Bookmarks, Recipes                 |
| **Social**       | Linktree, Poll, Event RSVP         |
| **Business**     | Client CRM                         |
| **News**         | HN reader, RSS reader              |

Or start from scratch and let AI build exactly what you need.