Trillo NPM | npm.io

Trillo

version license codeql build tests coverage

The HTML-oriented reactive web framework

Using a traditional reactive framework can be pretty involved.

Trillo is a groundbreaking alternative which strives for simplicity:

it turns HTML itself into a reactive language
it generates fully indexable pages
it lets you create your own custom tags.
it makes it easy to create your own component libraries.

It's implemented as a customizable Express server for Node.js. It augments HTML with :-prefixed attributes, [[...]] expressions, and <:...> directives, and it's easy to pick up.

Page-specific JavaScript code for both the client and the server is compiled on the fly as needed — you only have to focus on page logic and the server takes care of the rest, no matter what IDE or code editor you're using.

Trillo removes all the boilerplate associated with JS-oriented reactive web frameworks like Angular, React and Vue.js, while still encouraging good practices and code reuse. You'll be surprised at how effective it can be.

Trillo is under active development. We plan to reach v.1.0 later in 2023.

Hello World

install the package and create a dir for the example:

npm i -g trillo
mkdir myapp
trillo serve myapp
# ... START http://localhost:3000

add myapp/index.html

<html>
  <body :count="[[0]]"
        :did-init="[[
          setInterval(() => count++, 1000);
        ]]">
    Seconds: [[count]]
  </body>
</html>

navigate to http://localhost:3000 to see the seconds counter live.

If you look at the page source received by the browser you'll notice it contains the text "Seconds: 0". This shows that page logic is executed once in the server in order to deliver content-ready pages, and then transferred to the client to support local updates and user interaction: Trillo supports isomorphism out of the box.