🐯 Tiger

An HTML-first UI framework. No build step. No imports. No virtual DOM. One file, one script tag.

This folder is your app

You are not looking at a library you have to install. You are looking at a working application. Rename the folder, delete the demo, write your own pages.

npm start          # http://localhost:5000

Open pages/home.html, change a word, refresh the browser. That is the entire development loop. There is nothing to compile, nothing to watch, and nothing to configure.

What is in here

app.html            the shell — your layout, your menu, and <page>
app.css             your styles
shared.cells        your app's state: what every screen can read
components.json     which tag lives in which file

pages/              YOUR SCREENS. one file = one route.
  home.html           → the route `home`  (shown by default)
  settings.html       → the route `settings`
  task.html           → the route `task`, opened with a value: /task/42

components/         YOUR REUSABLE PIECES
  app-header.html
  task-item.html

tiger.js            the framework. one file. don't edit it.
serve.js            the dev server. ~40 lines. read it if you like.

That is the whole project. Your app, and the one file that runs it.

A whole feature, end to end

Here is the to-do list that ships in this folder. Nothing is left out.

shared.cells — the state:

theme = 'light' persist

task  = { id: auto, text: '', done: false }
tasks = [] of task persist

draft = copy task

pages/home.html — the screen:

<cells>
  count = tasks.length
  empty = count == 0
  left  = $count(tasks, { done: false })
</cells>

<h1>To-do</h1>
<p><span text="left"></span> of <span text="count"></span> left</p>

<input bind="draft.text" placeholder="What needs doing?">
<button disabled="draft.text.length == 0" click="draft +> tasks; task -> draft">Add</button>

<p show="empty">Nothing yet.</p>

<ul>
  <li each="task in tasks">
    <input type="checkbox" bind="task.done">
    <span text="task.text"></span>
    <button click="$remove(tasks, index) -> tasks">✕</button>
  </li>
</ul>

Read it out loud and it says what it does. Note what is missing: no event handlers, no useState, no setCount, no preventDefault, no re-render, no keys to remember. count and left are formulas — written once, never updated by hand, and they cannot go stale.

And it survives a refresh, because of one word: persist.

Adding a screen

Drop a file in pages/. That is all.

<!-- pages/about.html -->
<h1>About</h1>
<p>Built with Tiger.</p>

You now have a route called about. Link to it:

<a click="'about' -> $route">About</a>

No registration. No route table. No wiring. The folder is the route table.

Adding a component

Write it, then name it in components.json. Two steps.

<!-- components/user-badge.html -->
<define tag="user-badge" props="name">
  <span class="badge" text="name"></span>
</define>

<style local>
  .badge { padding: 0.2rem 0.5rem; border-radius: 99px; background: #eee; }
</style>

{
  "user-badge": "components/user-badge.html"
}

Now <user-badge name="Ada"> works in any page, at any depth. No import lines — tags find themselves through the manifest.

Ask your app how it works

Open the browser console:

tiger.trace('tasks')   // highlights every element that reads `tasks`, and prints why
tiger.graph()          // the whole page's data flow, in one table

Most frameworks cannot answer that question. Tiger wrote it down as you typed.

Upgrading Tiger

Replace tiger.js. That is the entire upgrade.

No npm update, no lockfile, no peer dependency, no build to re-run. It is one file. Swap it, refresh, done.

Trying it without downloading anything — soon

Tiger is one file, so it will work straight from a CDN:

<script src="https://unpkg.com/tiger-js"></script>

<cells>
  count = 0
</cells>

<button click="count + 1 -> count">Add one</button>
<p>You clicked <span text="count"></span> times.</p>

A complete Tiger app: no install, no folder, no terminal.

⚠️ Not live yet. That link 404s until Tiger is published to npm. For now, take this project — the tiger.js in this folder is the same file.

Likewise npm install tiger-js — coming, not there yet.

Documentation

⚠️ Not published yet. The guides exist, but they live with the framework source, which is not public while it settles.

The essentials are on this page: the folder layout above, adding a screen, adding a component, and tiger.trace() in the console. That is most of Tiger.

Editor support — soon

There is a Tiger extension for VS Code: syntax highlighting, autocomplete on your own cell names, hover, go-to-definition, find-every-reader, and errors that teach —

no cell named taks. Did you mean task?

⚠️ Not on the marketplace yet. It ships with the framework source, which is not public while it settles.

Honest status

Tiger is young, and it is one person's project. The holes are written down rather than hidden:

• A strict Content-Security-Policy will not run Tiger. Expressions compile with new Function, which strict CSP forbids. A deployment limit, not a security hole — your data is passed as arguments, never as code.
• Server rendering does not render routed screens yet.
• One value per route (/task/42), no nested routes.
• The code that touches the DOM has no automated tests. The pure logic has ~380.
• Editor support is VS Code only.

If one of these blocks you, open an issue. That is how the list gets shorter.

MIT © Houssem Nmiri