whatsup / examples

Whatsup framework examples

What is it?

Whatsup is a modern frontend framework with own reactivity system and JSX components based on pure functions and generators.

Features

• 🎉 easy to use: simple api, just write code
• 🚀 own reactivity system with high performance
• 🌈 cool styling system based on css modules
• 🚦 built-in router with intuitive api
• ⛓ glitch free, autotracking and updating of dependencies
• 🥗 written in typescript, type support out of the box
• 🗜 small size: ~7kB gzipped (state + jsx + cssx)

Example

import { observable } from 'whatsup'
import { render } from 'whatsup/jsx'

function* App() {
    const counter = observable(0)
    const increment = () => counter(counter() + 1)

    while (true) {
        yield (
            <div>
                <p>You click {counter()} times</p>
                <button onClick={increment}>Click me</button>
            </div>
        )
    }
}

render(<App />)

Documentation

You can find the Whatsup documentation on the website.

Check out the Intro page for a quick overview.

The documentation is divided into several sections:

• Introduction
• Getting Started
• Components
• State management
• Styling

Examples

• Todos MVC
• Async loaders
• Sierpinski triangle

License

MIT (c) 2020-present, @iminside