Build reactive web pages without leaving your HTML.

Large font-end frameworks come at a big cost from compiling to loading. Doars is a declarative and light solution that scans the web page and processes the directives found as well as keep the state and content up to date.

<!-- Define component. -->
<div d-state="{ messages: [ 'Hello there!', 'General Kenobi.' ] }">
  <div>List</div>

  <!-- Create a list item for each message. -->
  <ol>
    <template d-for="message of messages">
      <li d-text="message"></li>
    </template>
  </ol>

  <!-- Store input as a reference. -->
  <input type="text" d-reference="input">

  <!-- On click add input value to the messages. -->
  <button d-on:click="messages.push($references.input.value); $references.input.value = ''">
    Add
  </button>
</div>

<!-- Import library. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/[email protected]/dst/doars.umd.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Setup and enable the library.
    const doars = new window.Doars()
    doars.enable()
  })
</script>
List

Write logic directly in your layout.

Simply look at the HTML and read what it does, not just what structure it has. You won't need to dig through other files since the functionality is written on the relevant element itself.

But don't worry, the markup is still yours!

We promise we won't take it away. You can still modify the document directly in code and we will do all the work to stay up to date.

<!-- Define component. -->
<div d-state>
  <span>Counter: </span>

  <!-- The text directive's content is directly modified,
       but will be picked up by the library and used. -->
  <span id="counter-text" d-text="0"></span>
</div>

<!-- Setup increment button. -->
<button onclick="increment()">Increment</button>

<!-- Import library. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/[email protected]/dst/doars.iife.js"></script>
<script>
  // Increment count and set to text directive.
  let count = 0
  let element = document.getElementById('counter-text')
  increment = () => {
    count++
    element.setAttribute('d-text', count)
  }

  document.addEventListener('DOMContentLoaded', () => {
    // Setup and enable the library.
    const doars = new Doars()
    doars.enable()
  })
</script>
Counter: 

Use as much or as little as you want.

Doars can easily be added to an existing project since this solution doesn't force you to adopt an application wide architecture. You only need to load the library onto the page and add instructions in the form of attributes to your layouts.

Small in size and quick to update!

Minified and gzipped the library is about 12 kB, and when the state or document changes only relevant directives are executed making updates fast.

Simple to use, but rich in functionality.

The build-in directives

The build-in contexts

Easy to add to your project.

    From NPM

    Install the package from NPM, then import and enable the library in your build.

    // Import library.
    import Doars from '@doars/doars'
    
    // Setup and enable the library.
    const doars = new Doars()
    doars.enable()
    ESM build from jsDelivr

    Import the ESM build from for example the jsDelivr CDN and enable the library.

    <script type="module">
      // Import library.
      import doars from 'https://cdn.jsdelivr.net/npm/@doars/[email protected]/dst/doars.esm.js'
    
      // Setup and enable the library.
      const doars = new Doars()
      doars.enable()
    </script>
    IIFE build from jsDelivr

    Add the IFFE build to the page from for example the jsDelivr CDN and enable the library.

    <!-- Import library. -->
    <script src="https://cdn.jsdelivr.net/npm/@doars/[email protected]/dst/doars.iife.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // Setup and enable the library.
        const doars = new Doars()
        doars.enable()
      })
    </script>
    UMD build from jsDelivr

    Add the UMD build to the page from for example the jsDelivr CDN and enable the library.

    <!-- Import library. -->
    <script src="https://cdn.jsdelivr.net/npm/@doars/[email protected]/dst/doars.umd.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // Setup and enable the library.
        const doars = new window.Doars()
        doars.enable()
      })
    </script>

Customize to your liking!

If the build-in contexts and directives aren't enough you can easily add new functionality by adding plugins or writing your own.