callbag-jsx is a minimalist UI library using JSX for layouts and callbags
for reactivity. No virtual DOM, no dirty model checking, no compile time invalidations,
or any other magic tricks.
1linkimport { makeRenderer } from 'callbag-jsx';
2link
3linkconst renderer = makeRenderer();
4linkrenderer.render(<div>Hellow World!</div>).on(document.body);
👉 A more interactive example:
1linkconst count = state(0);
2link
3linkconst add = () => count.set(count.get() + 1);
4linkconst color = expr($ => $(count) % 2 ? 'red' : 'green');
5link
6linkrenderer.render(
7link <div onclick={add} style={{ color }}>
8link You have clicked {count} times!
9link </div>
10link).on(document.body);
👉 The famous Todolist app:
1linkconst todos = state([{title: 'Do this'}, {title: 'Do that'}]);
2linkconst next = state('');
3link
4linkconst add = () => {
5link todos.set(todos.get().concat([{title: next.get()}]));
6link next.set('');
7link};
8link
9linkrenderer.render(<>
10link <h1>Todos</h1>
11link <ol>
12link <List of={todos} each={todo => <li>{todo.sub('title')}</li>}/>
13link </ol>
14link <input type='text' _state={next} placeholder='What should be done?'/>
15link <button onclick={add}>Add</button>
16link</>).on(document.body);
linkQuick Links
