$render.js: Unleashing JSX in both browsers and servers without a virtual DOM.
Published: 2024-01-06 12:10:46

---
title: $render.js: Unleashing JSX in both browsers and servers without a virtual DOM.
published: true
description: 
tags: 
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsgsee99tbz07hug03vm.gif
# Use a ratio of 100:42 for best results.
# published_at: 2023-12-18 04:20 +0000
---
[LovePlay Music Player](codingnninja.github.io/lovePlay)(Built with $render)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsgsee99tbz07hug03vm.gif)

Introducing $render.js, a powerful tool that opens up new possibilities for JSX and more in-browser functionalities without the need for a virtual DOM or tagged templates.

$render.js is designed to scale up and scale down to cater to individual and business needs. And it takes everything you know about the front-end starting from JSX to htmx to the next level.

This release brings numerous features to enhance your development experience:

#### JSX Components:

* $render enables the use of JSX in the browser just like React but without a virtual DOM. No bullsh*t!

#### Macro Rendering:

* All components are rendered during the initial rendering process. No React *hydration* please.

{% codesandbox https://codesandbox.io/embed/yq4sn7?view=Editor+%2B+Preview&module=%2Findex.html %}

#### Micro Re-rendering:

* Enjoy efficient re-rendering, impacting only the triggering component and its related components. No need to get all the jungle because of a piece of banana.

{% codesandbox https://codesandbox.io/embed/ggjrqp?view=preview&module=%2Findex.html&hidenavigation=1 %}

#### DOM Destructuring:

* Easily select single and multiple DOM elements using destructuring. Move faster!

{% codesandbox https://codesandbox.io/embed/zktczg?view=Editor+%2B+Preview&module=%2Findex.html&expanddevtools=1 %}

Note: click the console.

#### Utility-First Functions:

* Access a pre-baked utilities and components suite for swift and efficient development. No pressure!

{% codesandbox https://codesandbox.io/embed/qnmlc4?view=Editor+%2B+Preview&module=%2Findex.html %}

#### Micro-Frontend:

* Build front-end applications with independent and modularized parts. Build at scale.

#### Hypermedia:

* Make requests to single or multiple servers to obtain component strings dynamically without the limit of htmx. Unlimited!

{% codesandbox https://codesandbox.io/embed/666k9k?view=Editor+%2B+Preview&module=%2Findex.html %}

#### Learn React without React:

* Customize $render to behave like React, facilitating learning and educational purposes. Education is the best legacy.

#### State Management Tools:

* Utilize custom tools for effective state management. It comes with a customizable state management tool. Easy pizzy!

#### Server-Side Rendering:

* Render your application UI directly from servers and $render will display it to your audience. Wow!

#### Multi-Server Requests:

* Enable multiple-server requests with a moderation-enforced approach. Let's be guided.

{% codesandbox https://codesandbox.io/embed/hwdm3g?view=Editor+%2B+Preview&module=%2Findex.html %}

#### Stability

$render is bringing back stability to the web so that your applications can still work after 50+ years of their creation.

Wow! That is cool. 

$render empowers you with these advanced features in browsers, eliminating unnecessary overhead. Now, you can focus on delivering value to your users effortlessly.

* [Click to get started with $render](https://render-docs.vercel.app/)
* [Follow $render on Twitter](twitter.com/tryRender)
* [Contribute to $render on Github](github.com/codingnninja/render)