Trillo

the web framework for Node and the browser that adds reactivity to HTML itself



npm i trillo

Traditional reactive frameworks like Angular, React or Vue can be pretty involved.

Trillo is a groundbreaking alternative which strives for simplicity.

Reactive HTML

You can declare logic values and reactive expressions directly in HTML, using :-prefixed attributes and [⁠[...]] blocks.

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

Seconds: 0

Indexable Pages

Page logic starts in the server, to generate content-ready pages, and continues in the client, to support user interaction.

  <:data-source :aka="cat"
                :url="/cat-facts"/>
  [[cat.content.fact]]
  <button :on-click="[[
    () => cat.trigger()
  ]]">Next</button>

Ancient Egyptian family members shaved their eyebrows in mourning when the family cat died.

Reusable Code

With <:define> you can turn blocks of markup into parametric custom tags, ready to be reused anywhere in your code.

  <:define tag="app-item" :k :v>
    <span>[[k]]</span>
    <b :hidden=[[v < 1]]>[[v]]</b>
  </:define>

  <app-item :k="Inbox" :v="5"/>
  <app-item :k="Sent" :v="3"/>
  <app-item :k="Drafts" :v="0"/>
  <app-item :k="Spam" :v="2"/>

Inbox 5

Sent 3

Drafts

Spam 2

Component Kits

Custom tags can be promoted to components and collected in kits, making them reusable across projects.

  <head>
    <:import src="/.kit/bootstrap/all.htm"/>
  </head>
  <body>
    <bs-carousel :autoPlay=[[true]]>
      <bs-carousel-item>First</bs-carousel-item>
      <bs-carousel-item>Second</bs-carousel-item>
    </bs-carousel>
  </body>

First

Second

Quick Start

Overview