Leafjs is a lightweight frontend framework built using web components and browser ES Modules.

Related tags

Learning resource javascript framework typescript js frontend web-components vanilla-javascript frontend-framework
Overview

Leafjs

A lightweight, fast web-components based frontend framework for the future.

Introduction

Leafjs is a lightweight frontend framework built using web components and browser ES Modules.

Using web components allows you to create components natively - supported by most modern browsers. Unlike React and Vue, Leafjs's component system is totally built on top of the web component system.

And just like React, Leafjs implements a simple reactivity system that allows two-way binding, just like most frameworks do.

Getting started

Use create-leafjs-app to get started:

$ npx create-leafjs-app my-app
$ # or
$ yarn create leafjs-app my-app

Then cd into your project directory and run npm run dev to start a development server.

Documentation

Please refer to https://leafjs.samzhangjy.com/.

Licensing

Leafjs is licensed under the MIT License. See LICENSE for details.

You might also like...

A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

Enhanced iFrame Protection - Browser Extension Enhanced iFrame Protection (EIP) is a lightweight extension to automatically detect and provide verbose

Dec 24, 2022

JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

May 20, 2022

A SPA (Single Page Application) that can track your books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

Awesome-Books-project Recreate awesome book app using ES6 syntax and modules. Built With HTML CSS Javascript Live Demo (if available) Live Demo Link G

Jul 14, 2022

A SPW (Single Page Website) that can track your favorite books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

A SPW (Single Page Website) that can track your favorite books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

awesome-books It is a project for Microverse's JavaScript Module to be done using pair-programming. Desktop Version Mobile Version In this website you

Aug 22, 2022

This is a simple frontend project which is built while learning full-stack web development

This is a simple frontend project which is built while learning full-stack web development

This is a simple frontend project which is built while learning full-stack web development by Dr.Angela yu the course is called The Complete 2022 Web Development Bootcamp this is the best-seller course in web development on Udemy

Aug 3, 2022

A simple way of loading inline es-modules on modern browser.

ES inline module A simple way of loading inline es-modules on modern browser. Usage Use inlineImport to dynamically import inline scripts. script typ

Dec 22, 2022

The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules.

Awesome-Books-ES6 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules.

Aug 18, 2022

A complete application tutorial to show how to implement the Web Socket protocol using only Node.js builtin modules

A complete application tutorial to show how to implement the Web Socket protocol using only Node.js builtin modules

Web Socket application using only Node.js built-in modules About Welcome, this repo is part of my youtube video about Building a complete application

Dec 19, 2022

A-Frame Element is a simple library for building fast, lightweight web components for 3D development

A-Frame Element is a simple library for building fast, lightweight web components for 3D development

aframe-element is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.

May 31, 2022
Comments
  • feat: working on drawable components

    feat: working on drawable components

    This is a working branch. I'm working on drawable components. Todo list:

    • [x] Add drawable components.
    • [ ] Add animated drawable components.
    • [ ] Add controllable drawable components.
    opened by onion108 2
Releases(v0.2.6)
Owner
Sam Zhang
An open source lover, also the former maintainer of @BaiduSpider. A middle school student in China. Feel free to send me emails! ;)
Sam Zhang
GitHub https://leafjs.samzhangjy.com
This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Karla Delgado 10 Aug 27, 2022
Simple components showing differences in each major frontend web framework.

Web Frameworks A collection of simple components in each of the leading frontend web frameworks. So far, covering React, Vue, Angular, Svelte and Soli

Daniel Still 21 Nov 27, 2022
`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

Wai Technologies 160 Dec 30, 2022
In this project, I built a basic website that allows users to add/remove books from a list using HTML/CSS to build the app and JavaScript to add functionalities. This project was organized using modules and ES6 syntax implemented.

Awesome books: with ES6 Description the project. Built With HTML CSS JAVASCRIPT Live Demo (if available) Live Demo Link Getting Started This is an exa

Emem Ekpo 7 Sep 9, 2022
Lightweight web components library built with LitElement.

Aybolit Aybolit is a lightweight, standards-based, framework agnostic UI components library built with LitElement. Aybolit is a fictional character fr

Serhii Kulykov 97 Dec 21, 2022
This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

Awesome books ES6 This is a website that allows users to add and remove books from a list. This project is build using JavaScript objects Built With H

Mustafa Fahimy 7 Jul 21, 2022
O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar ?? Sobre o projeto Voltar ao topo O ob

João Victor Negreiros 19 Aug 3, 2021
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built with HTML, CSS, JavaScript.

Awesome Books with ES6 This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built

Dino Ronald Quispe Arias 7 Jul 21, 2022
An awesome books library. Written using modules. Built with HTML/CSS and Javascript.

My Awesome Books my awesome books version.1 using modules in projects Built With HTML/ JavaScript Linters Live Demo (if available) Live Demo Link Prer

Botlhale Setou 10 Dec 21, 2022