Build reactive web pages without leaving your HTML.

Ditch the hassle with other frameworks. Doars is a declarative and simple solution that scans the web page and processes the directives found as well as keep the state and content up to date for you.

<!-- 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/doars@3/dst/doars.iife.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Setup and enable the library.
    const doars = new window.Doars()
    doars.enable()
  })
</script>

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/doars@3/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>

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 compressed the library is 11kB, 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.

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.