Tempo

Tempo is a modern, lightweight UI framework for building dynamic frontend applications with TypeScript. It provides a simple, predictable way to create reactive web interfaces without the complexity of other frameworks.

Project Homepage

Key Features

• Simple TypeScript Functions: Build UIs with plain functions, no complex class hierarchies or special syntax
• Zero Dependencies: Lightweight and efficient with no external dependencies
• Predictable Rendering: Direct DOM updates without a virtual DOM for better performance
• Reactive by Design: Built-in reactive state management with Signals
• Automatic Memory Management: Signals are automatically disposed when components unmount - no manual cleanup needed
• Type-Safe: Fully typed with TypeScript for better developer experience
• Fine-Grained Control: Precise control over rendering and updates when needed

Installation

# npm
npm install @tempots/dom

# yarn
yarn add @tempots/dom

# pnpm
pnpm add @tempots/dom

For UI components and utilities:

# npm
npm install @tempots/dom @tempots/std @tempots/ui

# yarn
yarn add @tempots/dom @tempots/std @tempots/ui

# pnpm
pnpm add @tempots/dom @tempots/std @tempots/ui

Quick Start

import { html, render, prop, on } from '@tempots/dom'

function Counter() {
  // Create a reactive state
  const count = prop(0)

  // Create a UI with the reactive state
  return html.div(
    html.h1('Counter Example'),
    html.div(
      'Count: ',
      count.map(String)  // ✨ Automatically disposed when component unmounts
    ),
    html.button(
      on.click(() => count.value--),
      'Decrement'
    ),
    html.button(
      on.click(() => count.value++),
      'Increment'
    )
  )
}

// Render to the DOM
render(Counter(), document.getElementById('app'))

Note: Signals created within components (like count and count.map(String)) are automatically tracked and disposed when the component is removed from the DOM. No manual cleanup required!

Packages

Tempo consists of three main packages:

@tempots/dom

The core UI framework that provides the foundation for building web applications. It includes:

• Renderables - The building blocks for creating UI elements
• Signals - Reactive state management
• DOM manipulation utilities
• Event handling

@tempots/std

A standard library of utility functions for TypeScript that complements Tempo:

• Array, string, and object utilities
• Async helpers
• Validation tools
• Timer functions
• And more

@tempots/ui

A collection of reusable UI components and renderables built on top of @tempots/dom:

• Common UI components
• Routing utilities
• Form controls
• Layout helpers

Demos

Check out these demos to see Tempo in action:

• Hacker News PWA - A Hacker News reader built with Tempo
• 7GUIs - Implementation of the 7GUIs benchmark
• TodoMVC - The classic TodoMVC example
• Counter App - A simple counter application

Documentation

For comprehensive documentation, visit the Tempo Documentation Site.

• Quick Start Guide
• How Tempo Works
• Renderables
• Signals
• Building Components

Why Choose Tempo?

• Simplicity: No complex abstractions or special syntax to learn
• Performance: Direct DOM updates without the overhead of a virtual DOM
• Type Safety: Built with TypeScript for better tooling and fewer runtime errors
• Lightweight: Small bundle size for faster loading
• Predictable: Clear, functional approach to UI development

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.