⛺ Tent

A jsx-free, super-lightweight and zero-dependency library to add reactivity to the web — without all the nonsense.

[!IMPORTANT]
Tent is currently in early development. It can be used in production, but there might be breaking changes in future versions. If you're interested in contributing, please submit a PR or report an issue. Keep track of the changes in the CHANGELOG.

⚙️ Installation

npm install @tentjs/tent

⚡ Quickstart

Getting started is very easy. Here's a simple example component that increments a number when the button is clicked. This example demonstrates creating a stateful component, updating the state, and mounting it to the DOM.

import { type Component, mount, tags } from '@tentjs/tent';

// Tags are used to create elements - like `div`, `button`, `span`, etc.
const { button } = tags;

type State = { count: number };

const Counter: Component<State> = {
  // Initial state
  state: { count: 0 },
  // Define the view
  view({ state }) {
    return button(
      `You clicked ${state.count} times`,
      // Add attributes to the button
      { onclick: () => state.count++ },
    );
  },
};

// Append the component to the body
mount(document.body, Counter);

💡 Examples

You can find examples for building a simple counter, todo list, a form and more in the examples repository.

👍🏻 Contribute

If you want to support the active development of Tent, there are a few ways you can help:

1. Give a ⭐ — bring attention to the project.
2. Tweet about it — share your excitement.
3. Get involved — join the discussions.
4. Contribute — submit a pull request.
5. Buy me a ☕ — thank you for your support!