Create a Capsule
A Capsule document is a single SQLite file containing a self-contained HTML application and its data. Build one using an AI assistant, start from a starter template, or write standard web code.
Build with an AI assistant
Capsule provides a detailed app builder prompt that instructs AI models how to construct single-file HTML applications with built-in SQLite collections and offline design tokens.
Launch or copy the prompt
Open ChatGPT or Claude with the instructions preloaded, or copy the prompt to use with any local or web model.
Describe your tool
The assistant asks questions one at a time to clarify your preferred layout, data fields, and core user actions.
Run your code
Copy the generated HTML and paste it into Capsule Web or open it in the desktop app. It runs directly in your browser.
Choose your assistant
Start from a template
Starter templates come with local SQLite collections, responsive layouts, and data schemas ready to test. Launch them directly in your browser or explore their structure.
Recipe Book
Save your favorite meals with cooking timers, ingredient scaling, and cooking logs.
Todo List
Organize your day with simple task lists, completion tracking, and quick filters.
Expenses Tracker
Track daily spending, categories, and monthly totals in a private local log.
Notes
Capture thoughts, write notes, and search through your personal notebook instantly.
Presentation
Create visual slides on a freeform canvas and present them full screen.
Flashcards
Master any topic with spaced repetition (SM-2), flippable cards, image assets, and AI deck generation.
Time & Billing
Track hours, watch project budgets, log expenses, and issue VAT invoices as PDFs.
Write standard HTML and JavaScript
Capsule applications require no build steps, bundlers, or servers. Write plain HTML, CSS, and JavaScript. Your code accesses an embedded SQLite database through clean browser APIs.
window.capsule.collection(name)
Lightweight document query API backed by SQLite tables. Supports find, findOne, insert, update, and delete.
localStorage
Standard synchronous web storage. Capsule automatically shims writes to persist inside the SQLite file across reloads.
window.capsule.assets
Store binary assets such as images, PDFs, and audio directly within the single .capsule container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="capsule-api-version" content="1">
<link rel="stylesheet" href="/v1/design-system.css">
<title>My Capsule Tool</title>
</head>
<body class="page">
<main class="card p-6 max-w-xl mx-auto mt-8">
<h1 class="text-2xl font-bold mb-3">Project Tracker</h1>
<p class="text-secondary mb-6">A single-file tool with local SQLite storage.</p>
<div class="form-group mb-4">
<input type="text" id="taskInput" class="form-control" placeholder="Add a new task...">
<button id="addBtn" class="btn btn-primary mt-2">Add task</button>
</div>
<ul id="taskList" class="list"></ul>
</main>
<script>
const tasks = window.capsule.collection('tasks');
async function render() {
const items = await tasks.find({}, { sort: { _id: -1 } });
const list = document.getElementById('taskList');
list.innerHTML = items.map(t => `
<li class="list-item">
<span>${t.title}</span>
</li>
`).join('');
}
document.getElementById('addBtn').addEventListener('click', async () => {
const input = document.getElementById('taskInput');
const val = input.value.trim();
if (!val) return;
await tasks.insert({ title: val, created_at: new Date().toISOString() });
input.value = '';
await render();
});
render();
</script>
</body>
</html>Build and edit offline with the desktop app
The Capsule desktop application adds an AI concept wizard and an agent panel tiled beside your live document window. Ask the AI to adjust layouts, add columns, or format calculations while watching changes update in real time.