Skip to main content
The builder interface is divided into six tabs, accessible via keyboard shortcuts or the tab bar.
Builder interface overview

The tinykit builder interface

​
AI Agent

Chat with AI to generate, modify, and debug your code. The agent understands your project context and can make changes across multiple files.
AI Agent panel

AI Agent generating a todo list component

Capabilities:
  • Generate complete components from natural language descriptions
  • Modify existing code based on your instructions
  • Debug errors and suggest fixes
  • Streaming responses so you see output in real-time
  • Conversation history persists across sessions
  • Auto-saves generated files to your workspace
  • Creates database collections and wires up data
Example prompts: 
"Create a contact form with name, email, and message fields"
"Add dark mode support to the app"
"Fix the bug where the submit button doesn't work"
"Add pagination to the user list"
Be specific in your prompts. Instead of “make it better”, try “add input validation and show error messages below each field”.

​
Code Editor

A full-featured Monaco editor (the same engine that powers VS Code) for when you need to make manual edits.
Code Editor panel

Monaco editor with IntelliSense

Features:
  • Syntax highlighting for all major languages
  • IntelliSense autocomplete
  • Error highlighting and diagnostics
  • Multi-cursor editing
  • Find and replace with regex support
  • Auto-save on change (triggers live preview reload)
  • File tree navigation
Keyboard shortcuts:
ShortcutAction
Cmd+SSave file
Cmd+PQuick open file
Cmd+FFind in file
Cmd+Shift+FFind in all files
Cmd+/Toggle comment

​
Live Preview

See your changes instantly in a sandboxed iframe. No manual refresh needed.
Live Preview panel

Live preview updates as you type

Features:
  • Auto-refresh on file save
  • Sandboxed iframe for security
  • Cache-busting ensures you always see latest changes
  • Responsive testing (resize the panel to test different viewports)
  • Console output for debugging
The preview shows your app exactly as users will see it at the root URL (/).

​
Content Fields

Edit text and content without touching code. Perfect for non-technical users or quick copy changes.
Content Fields panel

Content fields for easy text editing

How it works:
  • AI creates content fields as it builds your app
  • Each field maps to text in your app (headlines, descriptions, labels)
  • Edit values directly—no code changes needed
  • Live preview updates instantly

​
Design System

Customize colors, fonts, and spacing through CSS variables. No design skills required.
Design System panel

Design system with CSS variables

Features:
  • AI creates design fields based on what your app uses
  • Color pickers for easy customization
  • Changes apply instantly to live preview
  • Export CSS for use elsewhere
Example design fields:
  • Primary color, secondary color, accent color
  • Font family, font sizes
  • Border radius, shadows, spacing

​
Database

Built-in PocketBase database for storing your app’s data. No external database needed.
Database panel

Database panel with collections

Features:
  • Visual collection browser
  • Create, read, update, delete records
  • AI can create collections and wire up data
  • Real-time subscriptions available
  • Full PocketBase admin at /_pb/_

​
Snapshots (Time Travel)

Every change is saved. Go back in time whenever you need to.
Snapshots panel

Snapshot history for time travel

Features:
  • Automatic snapshots on every AI change
  • Manual snapshots before big changes
  • One-click restore to any previous state
  • See what changed between versions
Made a mistake? Just restore a previous snapshot. Your database data is preserved.

​
Multi-App Support

Run hundreds of apps from a single tinykit 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

13 templates included to jumpstart your projects:
CategoryTemplates
ProductivityKanban, Notes, Canvas, Timer
FinanceExpense tracker, Invoice generator
ContentBookmarks, Recipes
SocialLinktree, Poll, Event RSVP
NewsHN reader, RSS reader
Or start from scratch and let AI build exactly what you need.

​
Roadmap

Phase 1

Foundation - SvelteKit, Monaco, PocketBase, File API

Phase 2

AI Agent - Streaming, Multi-provider support, Tool calling

Phase 3

Core Features - Content fields, Design system, Snapshots, Domain routing

Phase 4

Advanced - Full PocketBase integration, Backend functions, On-page editing
5

Phase 5

Templates & Marketplace - Community templates, Component library
6

Phase 6

Collaboration - Multi-user editing, Sharing, Embeddable apps

Feature Request?

Have an idea? Share it on GitHub Discussions!