Omi: The Next-Gen Framework for Creating Custom Web Components

Web components are a set of web platform APIs that enable the creation of reusable, custom elements with encapsulated functionality for web pages and applications. These versatile components are designed to work seamlessly across various frameworks and libraries, making them highly portable.

What is Omi?

Omi is a cutting-edge web components framework that offers a comprehensive set of features for modern web development. It does not require extensive learning curve if you know React or even Javascript.

Omi combines the best of modern web technologies, making it a versatile choice for developers seeking a powerful and flexible framework for their web projects.

It also works great with other frameworks such as Vue.

Omi Killer Features

• Cross-Framework Compatibility: Omi allows the creation of web components that can be used across different frameworks, enhancing code reuse and flexibility.
• Reactive Programming: By using signals, Omi provides a reactive programming model, enabling automatic UI updates when data changes.
• Tiny Size and Fast Performance: The framework is designed to be lightweight, ensuring quick load times and efficient performance.
• Constructable Stylesheets: This feature allows for scoped and shared styles within components, improving maintainability and reducing global style conflicts.

Features

• Signal-driven reactive programming for efficient updates
• Integration with TDesign Web Components for UI development
• Extensive library of 100+ templates to kickstart projects
• Built-in form handling with OMI Form and a playground for experimentation
• Lucide Omi Icons for enhanced visual elements
• Optimized for size and performance
• Supports Web Components, JSX, Function Components, Router, Suspense, and more
• Flexibility in programming paradigms, supporting both OOP and DOP
• Utilizes Constructable Stylesheets for efficient style management

Install

Getting started with Omi is easy. Install it through npm, then use the CLI to create projects and components quickly. Omi works with both TypeScript and JavaScript, so you can use whichever you prefer.

Standalone:

npm i omi

To quickly create an Omi + Vite + TS/JS project:

$ npx omi-cli init my-app    # or create js project by: npx omi-cli init-js my-app
$ cd my-app           
$ npm start           # develop
$ npm run build       # release

To quickly create an Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS project:

$ npx omi-cli init-spa my-app  
$ cd my-app           
$ npm start           # develop
$ npm run build       # release

Create a Web Component

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

const count = signal(0)

function add() {
  count.value++
}

function sub() {
  count.value--
}

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

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

Use your component

import { h } from 'omi'
import './counter-demo'

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

// or 
import { CounterDemo, Other } from './counter-demo'
// Prevent tree Shaking when importing other things
render(<CounterDemo />, document.body)

// or
document.body.appendChild(document.createElement('counter-demo'))

License

MIT License

Resources & Downloads

• Source-code and downloads
• Home