A Lightweight HTML Component Library for Simplifying Code Structure

CompJS is a small JavaScript library designed to enhance HTML code organization by introducing a simple and effective way to create and use components.

To integrate CompJS into your project, add the following script tag at the end of your HTML file:

<script src="https://cdn.jsdelivr.net/gh/irdeako/compjs@main/comp.js"></script>

With this setup, you can leverage the power of components to make your HTML code more modular and maintainable.

Define components using the <define> tag. For example:

<define name="post" style="--color:var(--color)">
    <h2 style="--color:var(--color)">{{title}}</h2>
    <p>{{about}}</p>
</define>

In this example, we've created a component named "post" with placeholders for the title and about variables.

To use a component, simply include its tag in your HTML code:

<post color="red" title="This is CompJS"
      about="You can learn how to work with CompJS by reading this post">
</post>

Specify variable values directly in the component tag to customize its content.

Easily manage variable values within components. Set default values using the {{varName=defaultValue}} syntax. For instance:

<define name="htmlViewer">
    {{html}}
</define>
<htmlViewer msg="hello">
    <h2>Hello World!</h2>
    <button onclick="alert('{{msg=hi}}')">Click Here</button>
</htmlViewer>

Insert components from external files into your code:

<define src="path/to/component" name="something"></define>
<something></something>

CompJS streamlines your code, making it more readable and maintainable.

CompJS is designed to simplify your HTML code, making it more modular and expressive. Enjoy a more efficient development experience with CompJS!