adityaws/lithium-js

Lithium-js is a lightweight javascript ui library.


Keywords
ui, javascript, library, JS, web, front-end, lithium-js
License
MIT

Documentation

Lithium-JS

lithium-js is a lightweight javascript ui library. it was created for adding a small amount of interactivity for a page that is rendered by a sever like php or python. but it can also be used for creating ui easily and efficiently. it also provide a state management, a templating engine, and it doesn't require build tool

  • it is lightweight only < 8kb (uncompressed)
  • it has a state management feature
  • it has a templating engine
  • it doesn't require a build tool

Installation

  • composer use composer require adityaws/lithium-js

Note

lithium-js is currently a pretty new library and because of this there may be an unknown bug or security issues so use it at your own risk. and if you stumbled upon a bug or a security issues i will probably won't fix it because lithium-js is my secondary project and i don't want to get distracted away from working on my primary project. well maybe i will fix it if i have some spare time like maybe im resting a while from my primary project. so if you stumbled upon a bug you may want to find a workaround and same for security issues

Requirements

before you can start using the lithium-js you must have an understanding to html and javascript so if you don't understand javascript please learn javascript first

Getting Started

to get started with lithium-js first you may want to download the source code and then simply load it using the <script> tag

<script src="[path to lithium js]"></script>

after that you can now start using lithium-js.

Example Code

here is an example code for getting started this code is used to create a simple counter

<script src="src/lithium.js"></script>

<script>
  var count = new State('count', 0);
</script>

{{ count }}
<button onclick="count.set(count.val + 1)">
  increment
</button>
  • use a <script> tag to load the lithium js
  • use the State constructor to create a new state
  • use the {{ and }} to display the state value
  • use the set() method to set the new value of the state

if you still don't understand it don't worry we have a documentation

Documentation

here is the official documentation for lithium-js see documentation