KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #codex #typescript #ai-agents #claude-code #dsh #dsh-plugin #deepseek-harness #cli #macos #ai-agent #open-source

hywer

★ 42 Open GitHub ↗

🥢 World Smallest, JSX based, Fine Grained Reactive UI Library.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Logo](https://github.com/ssleert/hywer/assets/68077937/e6696b6a-10fb-4df0-9da9-409a675873b6)

## 🥢 **World Smallest**, `JSX` based, Fine Grained Reactive `UI` Library.

</div>

[Hywer](https://github.com/ssleert/hywer) is a **World Smallest**<sup>1kb</sup>, **JSX** based, Fine Grained Reactive **UI** Library.
Hywer uses **native browser apis** like `createElement`, `createTextNode` and reactively update its content. 
In Hywer all you **JSX** components like `<Component/>` is a **native HTMLElement** objects.
Hywer updates `DOM` **granularly** and **asynchronously** without slowing down your code.

## [Getting Started](https://github.com/ssleert/hywer/wiki/Getting-Started)

## At a glance
```jsx
import { ref } from "hywer"

const App = () => {
  const count = ref(0)
  const doubleCount = count.derive(val => val * 2)

return <>
    🧡 {doubleCount}
    <button onClick={() => count.val++}>👍</button>
    <button onClick={() => count.val--}>👎</button>
  </>
}

document.getElementById("app").append(...<App />)
```

## Key Features
- 1kb bundle size in `brotli` / `gzip`.
- `JSX` support **out of the box**.
- No virtual DOM.
- Fine grained updates to real DOM.
- Declarative UI programming with reactive states.
- Quick to learn. No component lifecycles or other super complicated crap.
- Don't pay for what you don't use. 0.7kb bundle size without reactive state
- Debuggable. `<div>` is a real div in DOM. Use your browser dev tools to inspect rendering.
- Rerender free mental model.
- Static reactive dependencies for best performance and async execution.
- `UglifyJS` / `closure compiler` ready code base.
- Incredibly Small & Understandable code base.
- Support of existing infrastructure tools like `webpack` `babel` `vite` `swc` `bun`, with little configuration.

## Links
- [Hywer + Vite template](https://github.com/ssleert/hywer-vite-template) 
- [Hywer proof of bundle size](https://github.com/ssleert/hywer-bundle-size)
- [Hywer Getting Started](https://github.com/ssleert/hywer/wiki/Getting-Started)

## Why Hywer?
### Performant
Carefully optimized for performance and bundle size. Hywer performance indistinguishable from vanilla js. 
Hywer provides very little layer of abstraction between your code and browser apis.
Reactive value dependecies is static and execution is async without main thread blocking.

### No Magic
Hywer behavior is predictable and simple to understand without any magic values or runtime dependency tracking.

### Unopinionated
Hywer only does one thing and does it well. 
Hywer does not dictate to you the style of code, where you use it, whether to use jsx, or the build system.
You can use Hywer with `babel`, `swc`, `webpack` or what you want.
You can even use Hywer with another framework if you want.
Hywer is just a lib that generates HTMLElement.

### Anything
Hywer can be anything you want it to be, depending on your desires, 
Hywer is open to your suggestions and pull rеquestions. 
You are the one who can make Hywer better!

### Browser support
Hywer support all mainline browser and any runtime with DOM api like Deno or Node.

## More
At this point Hywer is in a very early stage of development so feel free to open an issue with your problems and suggestions.

## Todo
- [ ] write base docs
  - [ ] getting started
  - [ ] api doc
- [ ] typescript support out of the box
  - [ ] write hywer.d.ts for all exported api
- [ ] project templates
  - [x] [vite template](https://github.com/ssleert/hywer-vite-template)
  - [ ] swc template
  - [ ] webpack template 
  - [ ] maybe other...
- [ ] bundlers plugins
  - [ ] vite plugin
  - [ ] webpack plugin
  - [ ] esbuild plugin (maybe. idk)
- [ ] website
  - [x] [project template](https://github.com/ssleert/hywer-website)
- [x] [bundle size test](https://github.com/ssleert/hywer-bundle-size)
- [ ] fine grained array change
  - for now arrays simply remove all old elements and insert new
- [ ] write tests
  - i dont really understand how to write tests for dom content

### made with ❤️ by ssleert
  
</div>

hywer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README