https://github.com/vanilla-jsx/vanilla-jsx

Vanilla jsx without runtime. HTML Tag return DOM in js, No virtual DOM.
https://github.com/vanilla-jsx/vanilla-jsx

customelements dom html-tag javascript jsx observable react vanilla vanilla-jsx vue webcomponents

Last synced: about 9 hours ago
JSON representation

Vanilla jsx without runtime. HTML Tag return DOM in js, No virtual DOM.

• Host: GitHub
• URL: https://github.com/vanilla-jsx/vanilla-jsx
• Owner: vanilla-jsx
• License: mit
• Created: 2020-11-15T07:08:57.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-20T07:41:08.000Z (about 4 years ago)
• Last Synced: 2025-01-14T08:49:49.215Z (about 21 hours ago)
• Topics: customelements, dom, html-tag, javascript, jsx, observable, react, vanilla, vanilla-jsx, vue, webcomponents
• Language: JavaScript
• Homepage: https://vanilla-jsx.github.io/vanilla-jsx/
• Size: 760 KB
• Stars: 89
• Watchers: 5
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vanilla-jsx

> Vanilla jsx without runtime.

>

> HTML Tag return DOM in js, No virtual DOM.

```js

const content = 
This is content.
;

document.body.append(content);

```


[Run](https://vanilla-jsx.github.io/vanilla-jsx/)

## install and config

```bash

npm i @vanilla-jsx/jsx-runtime

```

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

```js

...

    presets: [

        ...

        [

            '@babel/preset-react', {

                runtime: 'automatic',

                importSource: '@vanilla-jsx'

            }

        ]

    ]

...

```

then, coding js with jsx.

[simple source](https://github.com/vanilla-jsx/vanilla-jsx/tree/main/examples/simple)

## Documentation

- Getting started

    - [Lowercase is HTML Tag](https://vanilla-jsx.github.io/vanilla-jsx/#/Lowercase)

    - [Kebabcase is WebComponents](https://vanilla-jsx.github.io/vanilla-jsx/#/Kebabcase)

    - [PascalCase is FunctionExec](https://vanilla-jsx.github.io/vanilla-jsx/#/PascalCase)

    - [with Reactive - @vanilla-jsx/observer](https://vanilla-jsx.github.io/vanilla-jsx/#/observer)

- Advanced

    - [create Offscreen Canvas](https://vanilla-jsx.github.io/vanilla-jsx/#/canvas)

    - [with jQuery, but not selector](https://vanilla-jsx.github.io/vanilla-jsx/#/jquery)

    - [render HTML str - @vanilla-jsx/ssr](https://vanilla-jsx.github.io/vanilla-jsx/#/ssr)

    - [visual Koa Middleware - @vanilla-jsx/koa](https://vanilla-jsx.github.io/vanilla-jsx/#/koa) new

    - [with Markdown - @vanilla-jsx/mdx-loader](https://vanilla-jsx.github.io/vanilla-jsx/#/mdx)

and more: [https://vanilla-jsx.github.io/vanilla-jsx/](https://vanilla-jsx.github.io/vanilla-jsx/)