vanilla-jsx

Vanilla jsx without runtime.

HTML Tag return DOM in js, No virtual DOM.

const content = <div>This is content.</div>;
document.body.append(content);

Run

install and config

npm i @vanilla-jsx/jsx-runtime

and edit babel.config.js or .babelrc or other babel config:

...
    presets: [
        ...
        [
            '@babel/preset-react', {
                runtime: 'automatic',
                importSource: '@vanilla-jsx'
            }
        ]
    ]
...

then, coding js with jsx.

simple source

Documentation

• Getting started
  • Lowercase is HTML Tag
  • Kebabcase is WebComponents
  • PascalCase is FunctionExec
  • with Reactive - @vanilla-jsx/observer
• Advanced
  • create Offscreen Canvas
  • with jQuery, but not selector
  • render HTML str - @vanilla-jsx/ssr
  • visual Koa Middleware - @vanilla-jsx/koa ^new
  • with Markdown - @vanilla-jsx/mdx-loader

and more: https://vanilla-jsx.github.io/vanilla-jsx/