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
• 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)
    ),
    html.button(
      on.click(() => count.value--),
      'Decrement'
    ),
    html.button(
      on.click(() => count.value++),
      'Increment'
    )
  )
}

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

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.