Getting Started with $render
$render makes JSX possible in the browser without a virtual DOM. $render JavaScript components with the speed of light in script tags, and esModules.
It's intuitive, super fast and flexible.
Installation
You can check out LovePlay music player (opens in a new tab) if you want to see $render in action with script tags in the real world. It even has swiping and downloading capability.
Add $render with a script.
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script> </body> </html>Add JSX
- Add JSX inline
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script> <script> const { $render } = render; const Counter = (count = 0) => { return ` <div id="counter"> <button onClick="$render(Counter, ${count + 1})" style="height:30px; width:100px">Count is ${count} </button> </div> `; }; $render(Counter); </script> </body> </html>- Count live
- Add JSX via a link (app.js)
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script> <script src="app.js"></script> </body> </html>app.js content:
const {$render} = render; const Counter = (count = 0) => { return ` <div id="counter"> <button onClick="$render(Counter, ${count + 1})" style="height:30px; width:100px">Count is ${count} </button> </div> `; }; $render(Counter);