Tempo

A new UI Framework for the web

Why Choose Tempo?

• Simple TypeScript functions
• Predictable rendering without surprises
• Zero dependencies
• No hidden complexities
• Directly updates the DOM (no virtual DOM)
• Fine-grained control when required
• Lightweight and efficient

To get started, see the Quick Start guide.

Documentation

• Quick Start: Get started with Tempo in a few simple steps
• Installation: Install Tempo using npm or yarn
• How It Works: Learn how Tempo works under the hood
• Renderables: The building blocks of Tempo applications
• Signals: Reactive state management
• Build your own Renderables: Create reusable components
• Providers: Dependency injection and context sharing
• Examples & Best Practices: Common patterns and best practices
• Troubleshooting & FAQ: Common issues and solutions

Libraries

Tempo provides a set of libraries to help you build your applications:

• @tempots/dom: The core UI framework
• @tempots/std: A standard library with utility functions and types
• @tempots/ui: A collection of reusable UI components

Demos

See Tempo in action with these demo applications:

• Hackers News PWA: A Hacker News reader
• 7GUIs: Implementation of the 7GUIs benchmark
• TodoMVC: The classic TodoMVC example
• Counter Demo: A simple counter application

LLM-Friendly Documentation

This documentation is available in LLM-optimized formats following the llms.txt convention:

• llms.txt — Documentation index for AI tools
• llms-full.txt — Complete documentation in a single file