diff --git a/core.js b/core.js
new file mode 100644
index 0000000..26ce494
--- /dev/null
+++ b/core.js
@@ -0,0 +1,186 @@
+function render(...entries)
+{
+    let content = {};
+    let domContainer = document.createElement('div');
+    renderTreeQueQue(
+        domContainer,
+        entries,
+        content
+    );
+    return domContainer;
+};
+
+function renderTreeQueQue(domContainer, entries, content)
+{
+    if(!content._renderPlanned)
+    {
+        requestAnimationFrame(()=>{
+            createTree(
+                domContainer,
+                entries,
+                content
+            )
+        });
+        content._renderPlanned = true;
+    }
+};
+
+function createTree(domContainer, entries, content)
+{
+    let vdom = renderTree(entries, content);
+    for (const vnode of vdom) {
+        domContainer.append(vnode)
+    }
+}
+
+function * renderTree(entries,content)
+{
+    let fragment = document.createDocumentFragment();
+    for (const entry of entries) {
+        fragment.appendChild(é(entry).render(content))
+    };
+    return fragment;
+}
+
+function élement(...args)
+{
+    this._args = args;
+    let _stateIndex = [];
+    let _requireedRender = true;
+    let _previousCopy = [];
+    let _shadow = null;
+    this.hooks = [];
+    let _currentCopy = [];
+    this.getState = function(n){
+        return _stateIndex[n];
+    };
+    this.setCurrentCopy = function(shadow){
+        _previousCopy = _currentCopy;
+        _currentCopy = shadow;
+    };
+    this.setState = function(n,o){
+        if(
+            Object.is(_stateIndex[n], o)
+        )
+        {
+            _requireedRender = true;
+            _stateIndex[n]=o;
+        }
+    };
+    this.render = function(ctx) {
+        if(_requireedRender)
+        {
+            if(this._args[0] instanceof Function)
+            {
+                _shadow = document.createDocumentFragment();
+                RenderCompanent(
+                    this,
+                    ctx,
+                    this._args[1]
+                );
+                for (const entry of _currentCopy) {
+                    _shadow.appendChild(é(entry).render(ctx))
+                };
+            }else{
+                _shadow = RenderElement(this._args[0], ctx);
+            }
+        };
+        return _shadow || [];
+    };
+};
+
+function RenderElement(data)
+{
+    let elem = document.createElement(data.$ || "div");
+    for (const [name,value] of Object.entries(data)) {
+        switch(name)
+        {
+            case "$":
+                break;
+            case "in":
+                break;
+            default:{
+                if(name.startsWith('on'))
+                {
+                    elem.addEventListener(name.slice(2),value)
+                }else{
+                    elem.setAttribute(name, value)
+                }
+            };
+        }
+    };
+    if(data.in instanceof Array)
+    {
+        for (const companent of (data.in||[])) {
+            if(
+                typeof companent != élement &&
+                typeof companent == "string"
+            )
+            {
+                elem.append(document.createTextNode(companent));
+            }else{
+                elem.append(
+                    é(companent).render()
+                );
+            }
+        }
+    }else{
+        if(
+            typeof data.in != élement &&
+            typeof data.in == "string"
+        )
+        {
+            elem.append(document.createTextNode(data.in));
+        }else{
+            elem.append(
+                é(data.in).render()
+            );
+        }
+    }
+    return elem;
+}
+
+let currentCompanent;
+let currentStateIndex = 0;
+function RenderCompanent(élement, context, attr)
+{
+    currentCompanent = élement;
+    currentStateIndex = 0;
+    let vshadow = élement._args[0].apply(context,[attr]);
+    élement.setCurrentCopy(vshadow instanceof Array ? vshadow : [vshadow]);
+};
+function Update()
+{
+    //
+}
+function Var(value)
+{
+    let index = currentStateIndex++;
+    let state = currentCompanent.getState();
+    if(state.length)
+    {
+        state[index] = value;
+    };
+    return [
+        state[index],
+        (newValue) => {
+            if(newValue instanceof Function)
+            {
+                newValue = newValue(state[index]);
+            };
+            if(Object.is(
+                state[index],
+                newValue
+            ))
+            {
+                currentCompanent._requireedRender = true;
+            };
+        }
+    ]
+    return [value, () => {}];
+};
+
+function é(a,b)
+{
+    return a instanceof élement ? a : new élement(a,b);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..38899c4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script src="./core.js"></script>
+    <script src="./index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..645a50f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,23 @@
+function BoldText({text})
+{
+    return {
+        $:"b",
+        in: text
+    }
+}
+let e = é({
+    $:"div",
+    style:"width: 200px",
+    onclick:()=>{
+        alert("Clicked ")
+    },
+    in:[
+        "Hi !",
+        é(BoldText,{
+            text: "Bold Hi!"
+        })
+    ]
+});
+
+e = e.render();
+document.body.appendChild(e);
\ No newline at end of file