https://github.com/wompojs/wompo

Wompo is a React-like web components library to create functional UIs in the web.
https://github.com/wompojs/wompo

components-library js jsx typescript web-components

Last synced: 6 days ago
JSON representation

Wompo is a React-like web components library to create functional UIs in the web.

• Host: GitHub
• URL: https://github.com/wompojs/wompo
• Owner: wompojs
• License: mit
• Created: 2024-03-03T00:00:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-28T09:06:48.000Z (4 months ago)
• Last Synced: 2025-06-19T07:03:55.938Z (6 days ago)
• Topics: components-library, js, jsx, typescript, web-components
• Language: TypeScript
• Homepage: https://wompo.dev
• Size: 756 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

  

  

  

### Fast, React-like, Web-Components.

[![Published on npm](https://img.shields.io/npm/v/wompo.svg?logo=npm)](https://www.npmjs.com/package/wompo)



### Documentation

Check the full documentation for Wompo at [wompo.dev](https://wompo.dev).

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/wompo)

### Quick Example: Counter

Creating a custom Counter component is very easy with Wompo, and works exactly like React!

```js

import { defineWompo, html } from 'wompo';

export default function CounterComponent({ styles: s }) {

  const [count, setCount] = useState(0);

  const inc = () => setCount(count + 1);

  return html`

    Current value: ${count}

  `;

}

CounterComponent.css = `

  .button {

    border-radius: 10px;

    background-color: #573ef6;

    color: #fff;

    padding: 10px 20px;

    border: none;

  }

`

defineWompo(CounterComponent);

```

Then, you can simply render it in you HTML:

```html

```

### JSX

Wompo supports JSX. If you use it with Typescript, write this in your `tsconfig.json` file:

```json

"jsx": "react-jsx",

"jsxImportSource": "wompo",

```