English | 简体中文

Omi - Web Components Framework

• 📶 Signal-driven reactive programming
• 🌐 Web Components + JSX for streamlined component-based development
• 💒 Harness Constructable Stylesheets to easily manage and share styles

import { render, signal, tag, Component, h } from 'omi'

const count = signal(0)

function add() {
  count.value++
}

function sub() {
  count.value--
}

@tag('counter-demo')
class CounterDemo extends Component {
  static css = 'span { color: red; }'

  render() {
    return (
      <>
        <button onClick={sub}>-</button>
        <span>{count.value}</span>
        <button onClick={add}>+</button>
      </>
    )
  }
}

render(<counter-demo />, document.body)

Install

npm i [email protected]

Contributors

License

MIT © Tencent