# Hyperscript & Tag Helpers & JSX Style
SigPro provides two complementary ways to create DOM elements:
1. **The `h` function** – the low‑level DOM builder.
2. **Global Tag Helpers** (e.g., `div()`, `button()`, `span()`) – a convenient DSL built on top of `h`.
Both are reactive, auto‑cleanup, and support SVG, events, two‑way binding, and dynamic children.
---
## JSX with SigPro
SigPro works seamlessly with JSX. You can use JSX as a compile‑time syntax sugar for `h` calls.
### Configuration
#### TypeScript
```json
// tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
```
#### Vite
```js
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
esbuild: {
jsxFactory: 'h',
jsxFragmentFactory: 'Fragment'
}
})
```
#### Babel
```js
// babel.config.js
export default {
plugins: [
['@babel/plugin-transform-react-jsx', {
pragma: 'h',
pragmaFrag: 'Fragment'
}]
]
}
```
> **Note:** You need to import `h` and `Fragment` from SigPro in every JSX file, or make them global.
### JSX Example
```jsx
// App.jsx
import { $, h, Fragment, mount } from 'sigpro';
const Button = ({ onClick, children }) => (
);
const App = () => {
const count = $(0);
return (
SigPro with JSX
Multiple elements
Without extra wrapper
);
};
mount(App, '#app');
```
### What Gets Compiled
Your JSX:
```jsx
```
Compiles to:
```js
h('div', { class: "container" },
h(Button, {}, "Click")
)
```
---
## Without a Build Step (CDN + Tag Helpers)
If you don’t want to configure a JSX compiler, you can use the global tag helpers directly. They are available after loading SigPro via CDN.
```html
```
---
## Template Literals Alternative (`htm`)
For a JSX‑like syntax without a build step, you can combine SigPro with [`htm`](https://github.com/developit/htm).
```js
import { $, h, mount } from 'https://cdn.jsdelivr.net/npm/sigpro@1.2.18/+esm';
import htm from 'https://esm.sh/htm';
const html = htm.bind(h); // bind to SigPro's h function
const App = () => {
const count = $(0);
return html`
` | Large projects, teams familiar with React syntax |
| **`htm`** | Optional | `` html`
...
` `` | Buildless but HTML‑like syntax |
> **Tip:** All approaches are fully reactive, support two‑way binding, events, SVG, and automatic cleanup. Choose the one that fits your workflow.