PHPackages funisimo/jf - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. funisimo/jf ActiveFunisimo-javascript[Framework](/categories/framework) funisimo/jf =========== JF - light weight javascript framework 110JavaScript Since Mar 6Pushed 9y ago1 watchersCompare [ Source](https://github.com/gatispriede/jf)[ Packagist](https://packagist.org/packages/funisimo/jf)[ RSS](/packages/funisimo-jf/feed)WikiDiscussions master Synced 4w ago READMEChangelogDependenciesVersions (2)Used By (0) JF == [](#jf) Javascript framework / library - all in one JS,HTML,STYLE. Installation ============ [](#installation) ``` npm i --save jfjs ``` Welcome to JF.js ================ [](#welcome-to-jfjs) JF is Framework / Library all in one place. JF works with json type of structured javascript objects and converts that into HTML5. You can create rich templates which after JF execution creates HTML with JS and even with style. All that you need to work with JF framework is to add JF file, no other dependencies. Advantages ========== [](#advantages) 1. All in one template - js, html, style 2. Simple usage 3. Simple markup - JSON type 4. Native code 5. Fastest html builder ever created 6. Template accepts functions 7. No Selector framework (example: jQuery) is needed because all templates arr linked within javscript in JF.templates array Basic Template object ===================== [](#basic-template-object) ``` sample = { element: "div", id: "sampleId", class: "sampleClass", text: "Sample text" } ``` Will create: ``` Sample text ``` Available properties ==================== [](#available-properties) ``` (must have String) element Specifies the html node type (optional String) id specifies id (optional String) class specifies class (optional Object|String) data can hold objects, arrays strings for the specific html element (optional Object) style object can contain style (optional String) inlineStyle inline style for specific html element (optional Function) *custom* function executed after html has loaded, to be able to us need to include "custom" name in object key (optional Function) on* any on* native html function (examples: onclick,onload,onmouseover...) (optional String) name reserved word used for fillTemplate function to populate template with json input (optional String) text text representation for html element ``` Basic Usage =========== [](#basic-usage) Creator(document.body,sample) What it does? 1. Appends to document.body Element the templates resulting HTML 2. Creates above template and stores the template in JF.templates array with following ID as a key. 3. Creates JF.templates.sampleId Object containing: cssRules: Array\[\] linked rules if template has any, they are stored within JFstyle object elements: Object all create elements within template html funcArr: Array\[\] all custom functions html: HTMLElement linked html itself name: "sampleId" defined ID or generated ID if no specified remove: function remove function - should be used to completely remove template with all dependencies template: Object the template object itself with which the template was created Usage Description ================= [](#usage-description) There are 3 global javascript functions: "Creator", "JFstyle" and "Controller" which handles actions for template objects Creator(HTMLElement $target, Object $template1, Object $template2, ...., Object $templateN) Is responsible for taking a template and creating html ``` $target target HTML element on which appendChild method will be called after creating template $template1...$templateN Templates from which the html will be created ``` returns Array with created templates Controller(String $name, String $action, Function $function, Boolean $bool) Is responsible for creating simple interaction between templates ``` $name name of route $action action to be called or queued $function function which will be executed $bool true/false parameter for the function to be deleted after execution ``` returns true / false JFstyle Holds all css styles for templates has 1 function .addStyle(String $style) returns true / false Advanced examples ================= [](#advanced-examples) ``` sampleObject = { element: "div", id: "about", title: { element: "h3", text: "Hello I'm Gatis Priede", style: { display: "inline-block" }, custommargin: function(element){ var pos = element.getBoundingClientRect().width / element.parentNode.getBoundingClientRect().width * 100 / 2; element.style.marginLeft = 50 - pos + "%"; } }, description: { element: "h2", text: "Web crossplatform developer", style: { display: "inline-block" }, custommargin: function(element){ var pos = element.getBoundingClientRect().width / element.parentNode.getBoundingClientRect().width * 100 / 2; element.style.marginLeft = 50 - pos + "%"; } }, info:{ element: "p", text: "sampleText" } } ``` After execution html will result in ``` Hello I'm Gatis Priede Web crossplatform developer sampleText ``` Simple navigation example ``` sampleNavigation = { element:'div', id:'navigation', style:{ width:'100%', 'min-height':'50px' }, buttons:{ customfunc: function(element){ for(var id in element.children){ var button = element.children[id]; if(button instanceof HTMLElement){ button.onmouseover = function(){ this.classList.add('hover'); } button.onmouseout = function(){ this.classList.remove('hover'); } button.onclick = function(){ if(element.lastItem !== undefined){ element.lastItem.remove('active'); } this.classList.add('active'); element.lastItem = this.classList; } } } JFstyle.addStyle('.active { color: white; background: rgb(200, 200, 200);}'); JFstyle.addStyle('.hover { color: rgb(122, 122, 122); background: white;}'); }, element:"div", class: "div", style:{ float:"left", width:"100%" }, home:{ element:"button", text:"about", style:{ border:"none", width:"25%", padding:"2px", transition: "background ease 1s", "border-radius":"1px", "text-transform": "uppercase" }, }, pictures:{ element:"button", text:"pictures" }, programmings:{ element:"button", text:"programming" }, contacts:{ element:"button", text:"contacts" } } } ``` Will result in: ``` about pictures programming contacts ` ``` ### Health Score 21 — LowBetter than 18% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community9 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 86.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3626907?v=4)[Gatis Priede](/maintainers/gatispriede)[@gatispriede](https://github.com/gatispriede) --- Top Contributors [![funisimo](https://avatars.githubusercontent.com/u/663140?v=4)](https://github.com/funisimo "funisimo (19 commits)")[![gatispriede](https://avatars.githubusercontent.com/u/3626907?v=4)](https://github.com/gatispriede "gatispriede (3 commits)") ### Embed Badge ![Health badge](/badges/funisimo-jf/health.svg) ``` [![Health](https://phpackages.com/badges/funisimo-jf/health.svg)](https://phpackages.com/packages/funisimo-jf) ``` ### Alternatives [laravel/dusk Laravel Dusk provides simple end-to-end testing and browser automation. 1.9k39.6M293](/packages/laravel-dusk)[nineinchnick/edatatables Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin 173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf LinkCloud Fast Hyperf 241.2k1](/packages/link-cloud-fast-hyperf) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)