Overview

JAF: Just Another Framework

Does the world need another JavaScript framework? Probably not, but hear me out for a moment..

Imagine: Standard HTML, CSS, and Javascript, but with layouts, components, and automatic reactivity.

Let's also add simple folder based routing, state management, optimisic UI, animations, scoped styles, and modern DX, without dependencies, explicit imports, or "prop drilling".

No tiresome boilerplate. No new syntax to learn. Fast and easy, yet super powerful with sensible, opinionated defaults.

Think of JAF like a light wrapper around the web platform. But with some useful syntactic sugar and automatic lifting to reduce the pain.

Why JAF?

Modern frontend frameworks have become increasingly complex.

JAF takes a different approach:

• Automatic reactivity - Write let foo = "bar" and... it's reactive!
• HTML components - Components are just .html files
• File-based routing - Drop files in pages/ and they become routes
• Built-in state - Props are just available, wherever you need them

Quick Example

Here's a simple counter component in JAF:

<script>
	let count = 0
</script>

<button onclick="count++">Clicked {count} times</button>

<style>
button {
	font: inherit;
	font-weight: 500;
	background: var(--accent);
	color: var(--bg-primary);
	padding: 0.5rem 1rem;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition-fast);
}

button:hover {
	background: var(--accent-muted);
}
</style>

That's it. No imports, no hooks, no boilerplate.

The let declaration makes count reactive, and the value automatically updates when it changes.

Wait.. no imports?

Not unless you want to use them.. 🤷‍♂️ Otherwise, components just get auto-discovered by their filename.

If you have duplicate names, you will get a warning at build time, so you can import your preferred one.

Progressive simplicity

Start simple and add more complexity only when you need to. A basic component is just HTML with a script tag (if needed), and scoped styles (should you wish).

Advanced features are there when you need them.

Web standards first

JAF builds on standard HTML, CSS, and JavaScript. No proprietary syntax to learn.

If you know the web platform, you know most of JAF.

Introducing... JEX

Oh no, not another template language! But wait..

JEX is just JavaScript expression templates in HTML.

It's exactly like JSX expressions, but within actual HTML content.

Example:

<script>
let items = ['Apple', 'Banana', 'Cherry']
</script>

<ul>
  {items.map(item => (
    <li>{item}</li>
  ))}
</ul>

Introducing JAF sugar

If that is too verbose and "JSX"-ey for you, we offer a range of syntactic sugar wrappers that you can use instead, should you prefer, e.g:

<script>
  let items = ['Dog', 'Cat', 'Hamster']
</script>

<ul>
  <for each={items} as="item">
    <li>{item}</li>
  </for>
</ul>