💡 Zikojs a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities
mindmap
root((Ziko))
Core
Math
Utils
Functions
Complex
Matrix
Random
Calculus
Signal
Discret
Statistics
UI
Elements
Text
text
p
h1...h6
List
ol
ul
Table
Inputs
Semantic
Main
Header
Footer
Section
Article
Nav
Aside
Custom Elements
Flex
Grid
Accordion
Carousel
Tabs
CodeCell
CodeNote
Time
Animation
Ease functions
Loop
Data
Api
Converter
Decorator
Parser
Reactivity
Events
Observer
Use
Graphics
Svg
Canvas
App
Router
Seo
Config
Themes
Addons
Zikogl
Ziko-lottie
Wrapper
React
Svelte
Vue
Lit
Solid
Preact
npm install ziko npx create-ziko-app [My_App]cd [My_App]
npm run dev
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zikojs</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/ziko@latest/dist/ziko.js"></script>
<script>
Ziko.ExtractAll()
const hello = p("Hello World").style({
color: "gold",
fontSize: "30px",
fontWeight: "bold"
})
.onPtrEnter(e=>e.target.st.color(Random.color()))
.onPtrLeave(e=>e.target.st.color("gold"))
Ziko.App(
hello
).style({
width: "100vw",
height: "100vh",
background: "darkblue"
}).vertical(0, "space-around")
</script>
</body>
</html>📃 wiki
💡 Features
zikojs UI module adopts a distinctive approach to building and updating user interfaces. It doesn't rely on predefined markup templates. Instead, it leverages a hyperscript-like syntax to dynamically create and update user interfaces.
See More
For instance, consider the following JavaScript code using zikojs:
para=p(
text("hello"),
text("world")
)
.style({
color:"darkblue"
})
.forEach(n=>n.onPtrEnter(e=>{
console.log(e.target.text)
}));p(...) - This line creates a paragraph element (<p>) using zikojs. Inside the p() function, we pass in two text() function calls, which create text nodes containing "hello" and "world" respectively. These will be the contents of the paragraph.
.style({...}) - This method sets the style of the paragraph element. In this case, it sets the color to "darkblue".
.forEach(...) - This method iterates over the two items of the paragraph element. Inside the callback function, it sets up an event listener for the "pointerenter" event on each child element. When the pointer enters any child element, it logs the text content of that element to the console.
[!TIP] To acces the para items you can use Array like syntaxe ,
para[index]orpara.at(index)(index can positive or negative integer)
This code snippet produces the equivalent HTML structure:
<p style="color:darkblue">
<span>hello</span>
<span>world</span>
</p>
<script>
para=document.querySelector(p);
[...a.children].forEach(
n=>n.addEventListener("pointerenter",e=>{
console.log(e.target.textContent)
}))
</script>In summary, zikojs UI module enables dynamic creation and manipulation of user interfaces without relying on static markup templates, offering flexibility and control over UI elements.
You can integrate it inside other frameworks/libraries like React , Vue , Svelte ... To do so, all you need to do is install the ziko-wrapper package.
| Addon | Purpose | Dependecy | Links |
|---|---|---|---|
| zikogl | - | Threejs | NPM GITHUB |
| ziko-lottie | render Lottie file within zikojs app | Lottie-web | NPM GITHUB |
See More
Ziko.ExtractAll()
// if you want to extract only UI methodes you can use Ziko.UI.Extractll()🏷️ This method simplifies syntax by extracting all UI, Math, Time, Graphics, and other methods within the Ziko framework. Instead of writing specific namespace prefixes like Ziko.UI.text("Hi") , Ziko.Math.complex(1,2) , Ziko.Math.matrix([[1,2],[2,3]]), you can directly use simplified syntax such as text("Hi") , complex(1,1) and matrix([[1,2],[2,3]]).
It allows multiple methods to be called sequentially on an object, enhancing code readability and conciseness.
See More
See More
Example of creating simple Paint sketch using canvas and pointer events :
Scene=Canvas().size("500px","500px")
Scene.onPtrDown(e=>{
e.target.ctx.beginPath()
e.target.ctx.moveTo(
map(e.dx,0,e.target.element.offsetWidth,e.target.Xmin,e.target.Xmax),
map(e.dy,0,e.target.element.offseHeight,e.target.Ymin,e.target.Ymax)
)
})
Scene.onPtrMove(e=>{
if(e.isDown){
const x=map(e.mx,0,e.target.element.offsetWidth,e.target.axisMatrix[0][0],e.target.axisMatrix[1][0])
const y=map(e.my,0,e.target.element.offsetHeight,e.target.axisMatrix[1][1],e.target.axisMatrix[0][1])
e.target.append(canvasCircle(x,y,1).color({fill:"#5555AA"}).fill())
}})
Scene.onPtrUp(()=>{}) const inp=input().onKeyDown(throttle(e=>console.log(e.kd),1000));Zikojs has a built-in Single page application router based on history browser api
See More
const main= Ziko.App()
const p1=Section()
const p2=Section()
S=Ziko.SPA(
main,{
"/page1":p1,
"/page2":p2
})
// You can use regex to define routes
S.get(
pattern,
path=>handler(path)
)💡 Example using expressjs :
app.get('*', (req , res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});useThread(() => {
s = 0;
for (i = 0; i < 10000000000; i++) s += i;
return s;
}, console.log);If you appreciate the library, kindly demonstrate your support by giving it a star!
This projet is licensed under the terms of MIT License
