Nasal Piercings Manipulator

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.13 • Public • Published

    tests coverage version docs

    Callbags + JSX. No virtual DOM, compile-time invalidation, or other magic tricks.
    👉 Read the Docs

    Sample Todolist app:

    import { makeRenderer, List } from 'callbag-jsx';
    import { state } from 'callbag-state';
    const renderer = makeRenderer();
    const todos = state([{title: 'Do this'}, {title: 'Do that'}]);
    const next = state('');
    const add = () => {
      todos.set(todos.get().concat([{title: next.get()}]));
          <List of={todos} each={todo => <li>{todo.sub('title')}</li>}/>
        <input type='text' _state={next} placeholder='What should be done?'/>
        <button onclick={add}>Add</button>

    ►TRY IT!


    👉 Long Answer Here

    Main purpose of callbag-jsx is to provide full control over DOM while being as convenient as tools like React. In other words, unlike other frameworks and tools, callbag-jsx DOES NOT infer when and how to update the DOM, it gives you the tools to conveniently outline that.

    As a result:

    • It gives you full control and gets out of your way whenever it cannot help.
    • It is faster than most popular frameworks (it does less)
    • It is smaller than most popular frameworks (it needs less code)
    • It is pretty straight-forward, i.e. it just bind given callbags to DOM elements. So no weird hooks rules.
    • It is pretty robust, e.g. modify the DOM manually if you need to.

    👉 Comparison with Other Frameworks


    Easiest way is to use one of these templates:

    You can also just install the package:

    npm i callbag-jsx

    and use the following jsx pragmas in your .jsx/.tsx files:

    /** @jsx renderer.create */
    /** @jsxFrag renderer.fragment */

    👉 Read the docs for more info/options


    import { makeRenderer } from 'callbag-jsx';
    const renderer = makeRenderer();
    renderer.render(<div>Hellow World!</div>).on(document.body);
    import expr from 'callbag-expr';
    import state from 'callbag-state';
    const count = state(0);
    const add = () => count.set(count.get() + 1);
    const color = expr($ => $(count) % 2 ? 'red' : 'green');
      <div onclick={add} style={{ color }}>
        You have clicked {count} times!

    👉 Read the Docs


    There are no contribution guidelines or issue templates currently, so just be nice (and also note that this is REALLY early stage). Useful commands for development / testing:

    git clone
    npm i                   # --> install dependencies
    npm start               # --> run `samples/index.tsx` on `localhost:3000`
    npm test                # --> run all tests
    npm run cov:view        # --> run tests and display the code coverage report
    npm i -g @codedoc/cli   # --> install CODEDOC cli (for working on docs)
    codedoc install         # --> install CODEDOC dependencies (for working on docs)
    codedoc serve           # --> serve docs on `localhost:3000/render-jsx` (from `docs/md/`)


    npm i callbag-jsx

    DownloadsWeekly Downloads






    Unpacked Size

    267 kB

    Total Files


    Last publish


    • lorean.victor