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.
npm install @tentjs/tentGetting 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 an element in the DOM
mount(document.querySelector('.counter'), Counter);You can find examples for building a simple counter, todo list, a form and more in the examples repository.
If you want to support the active development of Tent, there are a few ways you can help:
- Give a ⭐ — bring attention to the project.
- Tweet about it — share your excitement.
- Get involved — join the discussions.
- Contribute — submit a pull request.
- Buy me a ☕ — thank you for your support!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent