How to create a component in RE:DOM?

Define a function that returns DOM elements using RE:DOM helpers like el or text. For reusable components, use the component helper to manage lifecycle and updates, as shown in the documentation examples.

Is RE:DOM faster than React?

Yes, RE:DOM often outperforms React in benchmarks due to its lack of virtual DOM overhead, making it a strong choice for performance-critical applications where speed and memory efficiency are priorities.

Can I use JSX with RE:DOM?

Yes, but it requires installing the babel-plugin-transform-redom-jsx plugin and configuring Babel to transform JSX into RE:DOM function calls, which adds an extra step compared to native JSX support in frameworks.

How to handle state in RE:DOM applications?

RE:DOM doesn't include state management, so you need to integrate external libraries like Redux or MobX, or manage state manually with plain JavaScript, which can lead to more boilerplate code.

What are the best alternatives to RE:DOM?

For similar lightweight approaches, consider Preact or Svelte. If you need more features and a larger ecosystem, React or Vue might be better suited due to their extensive tooling and community support.

Does RE:DOM support server-side rendering?

Yes, through the NO:DOM tool, but it's a separate package that requires additional setup, unlike frameworks like Next.js or Nuxt.js which have integrated SSR solutions.

Open-Awesome

redom

MITJavaScriptv4.1.0

A tiny (2 KB) JavaScript library for creating user interfaces with pure JavaScript and web standards.

Visit Website GitHub

3.4k stars123 forks0 contributors

What is redom?

RE:DOM is a tiny JavaScript library for building user interfaces by directly creating and managing DOM elements. It solves the problem of UI complexity and performance overhead by eliminating virtual DOM and using pure JavaScript, resulting in faster applications with minimal memory usage.

Target Audience

Frontend developers who prioritize performance, bundle size, and simplicity, and prefer working directly with the DOM and web standards over heavy frameworks.

Value Proposition

Developers choose RE:DOM for its exceptional speed, tiny footprint, and straightforward approach to UI development without the learning curve of templating languages or virtual DOM abstractions.

Overview

Tiny (2 KB) turboboosted JavaScript library for creating user interfaces.

Use Cases

Best For

Building lightweight web applications with minimal bundle size
Creating high-performance UIs where speed and memory efficiency are critical
Developing with pure JavaScript without relying on templating languages
Projects that require direct DOM manipulation and control
Prototyping or small-scale applications needing a simple UI layer
Educational purposes to understand DOM-based UI libraries

Not Ideal For

Projects needing a rich ecosystem of pre-built UI components and plugins
Applications requiring integrated server-side rendering without additional tooling
Teams preferring declarative templating languages with zero-configuration JSX support
Large-scale apps with complex state management that benefit from framework-integrated solutions

Pros & Cons

Pros

Extremely Lightweight

At only 2 KB, RE:DOM has a negligible impact on bundle size, leading to faster load times and reduced bandwidth usage compared to heavier frameworks.

High Performance

By eliminating the virtual DOM and using direct DOM manipulation, RE:DOM achieves superior speed and lower memory consumption, as evidenced by benchmarks outperforming React.

Pure JavaScript Simplicity

It uses 100% JavaScript without templating languages, allowing developers to leverage existing skills and avoid learning new syntax or abstractions.

Web Standards Adherence

RE:DOM leverages native DOM APIs and modern JavaScript, ensuring compatibility with browsers and avoiding vendor lock-in.

Cons

Limited Tooling Ecosystem

Compared to frameworks like React or Vue, RE:DOM has fewer third-party tools, libraries, and community resources, which can slow down development for complex features.

JSX Requires Extra Setup

Using JSX necessitates installing and configuring the separate babel-plugin-transform-redom-jsx plugin, adding complexity to the build process compared to frameworks with built-in support.

Manual State Management

RE:DOM focuses solely on the view layer, so state management must be handled externally with libraries like Redux, increasing boilerplate and integration effort.

Frequently Asked Questions

Related Projects

preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Stars38,572

Forks2,031

Last commit16 days ago

Hyperapp

1kB-ish JavaScript framework for building hypertext applications

Stars19,208

Forks778

Last commit1 year ago

van

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.

Stars4,365

Forks107

Last commit2 months ago

fre

:ghost: Tiny Concurrent UI library with Fiber.

Stars3,765

Forks350

Last commit1 month ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub