https://github.com/zikojs/ziko-jsx
JSX support for ZikoJS
https://github.com/zikojs/ziko-jsx
acorn ast javascript jsx jsx-syntax morocco vite zikojs
Last synced: 2 months ago
JSON representation
JSX support for ZikoJS
- Host: GitHub
- URL: https://github.com/zikojs/ziko-jsx
- Owner: zikojs
- License: mit
- Created: 2026-02-02T09:12:07.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-03-01T13:15:16.000Z (4 months ago)
- Last Synced: 2026-04-04T06:36:50.239Z (2 months ago)
- Topics: acorn, ast, javascript, jsx, jsx-syntax, morocco, vite, zikojs
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 11
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ziko-jsx
[](https://github.com/zikojs)
JSX support for ZikoJS, compiling JSX components to ZikoJS at runtime—no VDOM involved.
## Example
### Input (JSX)
```jsx
import {ExternalComponent} from './ExternalComponent.js'
export default function Hello({ text, value } = {}) {
return (
hello {text}
)
}
```
### Output (ZikoJS)
```js
import { tags } from "ziko/domm";
import {ExternalComponent} from './ExternalComponent.js'
export default function Hello({ text, value } = {}) {
const { div, span, custom_element } = tags;
return div(
{ class: "parent" },
span("hello ", text),
custom_element(),
ExternalComponent()
);
}
```
### Notes
- JSX is syntax sugar only, it compiles directly to function calls.
- Lowercase JSX tags are mapped to ZikoJS tag functions via `tags`
- Custom elements (`custom-element`) are normalized to valid identifiers (`custom_element`).
- Capitalized JSX tags are treated as components and invoked directly.
- JSX whitespace semantics are preserved:
- Inline text spacing is kept (hello {text} → "hello ", text)
- Layout/indentation whitespace is ignored
## Install
```bash
npm i ziko-jsx
```
## Config
## Licence
MIT