---
title: reLift-HTML
---

<template>
  <div class="wrapper">
    <header class="header ">
      <div class="container">
        <h1 class="title">reLift-HTML</h1>
        <div class="description">
            <strong>A very small (3kb) view library that is packed:</strong> <br>
            Web Components, Custom Element, Template Literals,<br> 
            Reactive, Data Binding, One Way Data Flow,   <br>
            Two-way data binding, Event Handling, <br>
            Props, Lifecycle, State Management,<br> 
            Computed Properties, Directives.<br>
            No dependencies, no virtual dom,<br> no build tool.
            <strong>Wow!</strong><br>
            <em>...but it's a just a view library!</em>
        </div>

        <a class="button button-large" href="{{ page_url('guide') }}" title="Getting Started"
          ><strong>Get Started</strong></a>
        <a
          class="button button-large button-outline"
          target="_blank"
          href="https://github.com/mardix/relift-html"
          title="Github repo"
          >Github</a>
      </div>
    </header>

    <section>
      <div class="container">
        <div class="row">
          <div class="column">
            <p
              class="codepen"
              data-height="800"
              data-theme-id="0"
              data-default-tab="html,result"
              data-user="mardix"
              data-slug-hash="VNVyze"
              style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;"
              data-pen-title="VNVyze"
            >
              <span
                >See the Pen <a href="https://codepen.io/mardix/pen/VNVyze/"> VNVyze</a> by Mardix (<a
                  href="https://codepen.io/mardix"
                  >@mardix</a
                >) on <a href="https://codepen.io">CodePen</a>.</span
              >
            </p>
            <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
          </div>
        </div>
      </div>
      <hr>
    </section>


    <section class="container">

      {% markdown %}

        {% include "content/guide-docs/faq.md" %}

      {% endmarkdown %}

      <h3 class="title">Contribution</h3>
      <p>
        Every ideas, updates, fixes, changes, anything are welcome.
      
        Go to  <a target="_blank" href="https://github.com/mardix/relift-html">Github</a>, fork it and send your pull request. 
      </p>

      <hr /> 

      <h3> License</h3>
      MIT 

      <hr/>

      <h3>About Mardix</h3>

      {% markdown %}
      I'm <a target="_blank" href="https://github.com/mardix">Mardix</a>, an inventor, a creator and a UI Tech Lead Application Engineer at Bank of America, in Charlotte, NC, USA.  

      I love to invent stuff. I love to make stuff. I love UI. I love Javascript. I love Python.

      If you have any suggestions, questions or anything, please don't hesitate to reach out.

      {% endmarkdown %}

      <hr/>

      <a class="button button-large" href="{{ page_url('guide') }}" title="Getting Started"
      ><strong>Documentation</strong></a>
      <a
      class="button button-large button-outline"
      href="{{ page_url('demo') }}"
      title="Demo"
      >Demo</a>
    <a
      class="button button-large button-outline"
      target="_blank"
      href="https://github.com/mardix/relift-html"
      title="Github repo"
      >Github</a>
    <a
      class="button button-large button-outline"
      target="_blank"
      href="https://discord.gg/r3HqNYy"
      title="Discord"
      >Discord</a>

    </section>
  </div>
</template>



<style>
  .main-title {
    text-align: center;
  }
</style>