Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Project logo


Build reactive websites without leaving your HTML. Ditch the hassle with other frameworks. Doars is a declarative and light solution that scans the webpage then processes the instructions found as well as keep the state and content up-to-date.

You can write logic directly in your layout, as a result you have to simply look at the HTML to read what the elements do. You won't need to dig through other files because the functionality is written on the structure itself.

<!-- Add library to the document from a CDN. -->
<script src=""></script>
  // Wait for the DOM to be interactive.
  document.addEventListener('DOMContentLoaded', () => {
    // Setup a library instance.
    const doars = new window.Doars()
    // Enable library.

<!-- Define component with a list of messages. -->
<div d-state="{ messages: [ 'Hello there!', 'General Kenobi.' ] }">
  <!-- Create a list item for each message. -->
    <template d-for="message of messages">
      <li d-text="message"></li>

  <!-- 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 = ''">

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 your own code and the library will do all the work to stay up to date.

Use as much or as little as you want. Doars can easily be added to an existing server side rendered or statically generated project because 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.


This mono-repository includes the core library as well as several plugins. See the full list below or the packages directory.

Name Description
@doars/doars The core library, it manages the components and plugins as well as includes the basic contexts and directives.
@doars/doars-alias Plugin for creating aliases or renaming any context or directive.
@doars/doars-cookies Plugin that adds a cookies context to get and set browser cookies.
@doars/doars-local-storage Plugin that adds a local storage context to get values from and set values in local storage.
@doars/doars-fetch Plugin that adds a fetch context that handles parsing the returned content.
@doars/doars-intersect Plugin that adds an intersect directive for reacting to intersection changes.
@doars/doars-morph Plugin that adds a morph context and directive that instead of setting directly to the innerHTML of an element morphs the DOM to the new structure.
@doars/doars-navigate Plugin that adds a navigation directive that loads pages without unloading the current page by listening to anchor tags.
@doars/doars-router Plugin that adds a router context with set of directives to control it.
@doars/doars-store Plugin that adds a store context for global state management.
@doars/doars-update Plugin that adds an update loop context and directive.


  • Memoization context for faster updates.
  • Watch context in addition to the directive.
  • Handling form submissions to allow in page changes.
  • Add section loading directive to the navigate plugin where another page gets loaded in below the directive.
  • Visibility directives similar to intersection plugin.
  • Realtime shared state between clients using WebRTC.
  • Sensor access via context and react to changes via directives (Accelerometer, etc.)


If you are using the library and are running into an problem that you don't know how to solve, or would love to see a particular feature then feel free to create an issue. Or perhaps you want to make that cool feature, or help out in any other way. Then you are more then welcome! Read more about how to contribute.

In the wild

If you are using Doars then please let me know, I would love to hear about it!