https://github.com/whatsup/whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system
https://github.com/whatsup/whatsup

framework generators javascript jsx reactive state-management typescipt

Last synced: about 1 month ago
JSON representation

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

• Host: GitHub
• URL: https://github.com/whatsup/whatsup
• Owner: whatsup
• License: mit
• Created: 2020-08-06T07:54:33.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-31T14:40:09.000Z (9 months ago)
• Last Synced: 2024-11-09T12:03:28.534Z (about 1 month ago)
• Topics: framework, generators, javascript, jsx, reactive, state-management, typescipt
• Language: TypeScript
• Homepage: https://whatsup.js.org
• Size: 2.28 MB
• Stars: 147
• Watchers: 11
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - whatsup
• awesome-javascript - Whatsup - A frontend framework for chillout-mode development 🥤. JSX components on generators, fast mobx-like state management and exclusive cssx style system. (MVC Frameworks and Libraries / Runner)

README

        
![](https://raw.githubusercontent.com/whatsup/whatsup.github.io/master/assets/images/readme.png)

## 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

```tsx

import { observable } from 'whatsup'

import { render } from 'whatsup/jsx'

function* App() {

    const counter = observable(0)

    const increment = () => counter(counter() + 1)

    while (true) {

        yield (

            


                
You click {counter()} times

                Click me

            

        )

    }

}


render()

```

### Documentation

You can find the Whatsup documentation on the [website](https://whatsup.js.org).

Check out the [Intro page](https://whatsup.js.org/docs/intro/) for a quick overview.

The documentation is divided into several sections:

-   [Introduction](https://whatsup.js.org/docs/intro/)

-   [Getting Started](https://whatsup.js.org/docs/getting-started)

-   [Components](https://whatsup.js.org/docs/components/)

-   [State management](https://whatsup.js.org/docs/state-management/)

-   [Styling](https://whatsup.js.org/docs/styling/)

### Examples

-   [Todos MVC](http://examples.whatsup.js.org/todos)

-   [Async loaders](http://examples.whatsup.js.org/loadable)

-   [Sierpinski triangle](http://examples.whatsup.js.org/sierpinski)

### License

[MIT](https://opensource.org/licenses/MIT) (c) 2020-present, [@iminside](https://github.com/iminside)