Facy

Not another web framework...

Facy proposes a new way to develop dynamic web apps.

Here is a simple example:

renderApp('Hello worldy!').mount(document.body);

function renderApp(title: string): Tag {
  return Tag.div().withChild(
    Tag.h(1, title),
    renderCounter(),
  );
}

function renderCounter(): Tag {
  const counter = Reactive.of(0);
  return Tag.div().withName('card').withChild(
    Tag.button().on('click', () => counter.set(counter.unwrap() + 1)),
    Tag.text(counter.derive(c => `times clicked: ${c}`)),
  );
}
Copy

Forget HTML templates, what about an ergonomic TypeScript API instead?

Forget components, all you need are plain functions to render reusable tag structures.

Facy relies on Toolish reactivity to track dynamic data, so the DOM can be updated automatically, only when and where needed.

As you can see, reactivity is handled explicitly, using plain TypeScript, no magic tricks here. Most APIs transparently support both static and reactive data.

⚠️ This is an experiment, I wouldn't bet my production code on it!

💡 Feel free to share your thoughts, submit issues or feature requests, or better yet pull requests!

Documentation

• API

Demos

• Simple counter: as shown above
• Todo app: a more real-world use case