Show Sidebar Menu

KoiCom web-components library

A link to the documentation:

https://valkoivo.github.io/koicom/index.html

Github link:

https://github.com/valkoivo/koicom

The KoiCom library focuses on building interfaces using components with a standardized lifecycle, which streamlines development and facilitates testing.

Frontend interfaces built with the KoiCom library can run entirely on the client side (in the browser), interacting with the server only for data exchange.

The following is an example of a CRUD panel created using the library's basic components.

Documentation

The KoiCom library includes documentation and a set of fundamental components.

The documentation outlines the methodology for developing frontend interfaces and explains the principles behind the selection of specific solutions.

The fundamental components demonstrate the library's principles and can serve as a basis for building more complex components and interfaces.

Key Features

  • The library is built on web-components technology and standardizes the component lifecycle, enabling you to quickly create custom components by following the standard.
  • The component lifecycle emphasizes data exchange between components rather than their visual appearance. You can customize the look of components using your own CSS frameworks.
  • Components are functionally specialized to be easily combined into more complex structures, allowing you to encapsulate elements such as cards, lists, forms, modals, and more.
  • Each component is a combination of individual behaviors, a data object, and a visual representation, giving you the flexibility to mix existing behaviors and rapidly develop new components.
  • Behaviors consist of intuitive, easy-to-understand method sets.
  • Components can be seamlessly swapped, enabling you to test hypotheses and iterate on project versions quickly.
  • Components retain the simplicity of standard HTML elements, eliminating the need to learn new syntax for their implementation.

Installation

The KoiCom library does not require package managers for installation.

The library operates independently of third-party libraries or frameworks. It is built entirely with vanilla JavaScript.

The library consists of JavaScript files that can be stored anywhere in your project's directory structure and imported directly into your code.

Download link

Fundamental Components

Below are examples of the fundamental components.

This is a Button

Example Code

Below is an example of a component that displays the product of two numbers as text.

The component is implemented with the code shown below.

The component can be embedded in an HTML document using the following code.

License

MIT © Koi

Tags

javascript html components web webcomponents web-components custom-elements