A very compact and small library that provides reactivity technology to your code, like vue or react.

Playground

Usage

<scriptsrc="https://unpkg.com/reemjs"></script>

Put this code in your head tag

---

After connecting the library, add code below to your tag body

<script>RemJs.data({userName:"Tony",num:228,status:true,arr:[1,2,3,4,5]})</script>

The object inside the data() function is a list with your variables. You can write any variable and then use them in your HTML

---

<pin>hello {userName}</p>

Use a special attribute in to insert your variable in HTML element. Write the variables in { } to display them

<pin>your number is {num * 2}</p>

In the brackets you can also write any 'JS' expression, but there should be the presence of at least one variable, in the other it will not work

---

attribute if

<divif="num > 5"><p>number more than 5</p></div>

Use the if attribute to hide and show the element depending on the condition

---

attribute bind

<inputbind="checked:status" type="checkbox">

Use attribute bind to tie the property of an element with your variable

---

attribute css

<pcss="fontSize:num">Lorem ipsum</p>

Use attribute css to dynamically change the styles of your element

---

attribute on

<buttonon="click:num++">{num}</button>

Use attribute on to add an event to your HTML element

---

attribute each

<uleach="arr"><li>item {$$}</li></ul>

Use attribute each, to iterate the array. In the middle of the block with this attribute, there should be only 1 element that will be repeated, all content and other elements should be placed in it. Use '$$' to get the current array item
*This attribute is still in development, many things may not work.

---

Work in script

constdt=RemJs.data({userName:"Tony",num:228,status:true,arr:[1,2,3,4,5]})console.log(dt.num)dt.num=123console.log(dt.num)

To work with variables in the script, you need to return the object from the function data()

---

Examples

<buttonon="click: count++" in>
count is: {count}
</button><script>RemJs.data({count:0})</script>

live preview click

<h1>
color is:
<spancss="color:color" in>
{color}
</span></h1><script>constdt=RemJs.data({color:'red'})setTimeout(()=>{dt.color='blue'},1000)</script>

live preview click