Cdn

Use Jsdelivr

<script src="https://cdn.jsdelivr.net/npm/dativejs@2.0.0/dist/dative.js"></script>
<!--Production-->
<script src="https://cdn.jsdelivr.net/npm/dativejs@2.0.0/dist/dative.min.js"></script>

Use Unpkg

<script src="https://unpkg.com/dativejs@2.0.0/dist/dative.js"></script>
<!--Production-->
<script src="https://unpkg.com/dativejs@2.0.0/dist/dative.min.js"></script>

Esmodule

import Dative from 'https://unpkg.com/dativejs@2.0.0/dist/dative.es.min.js';
var app = new Dative({
  el: "#app",
  template(){
    return `
      <h1>Hello world</h1>
    `
  }
})
app.render();

Npm

npm install dativejs

Also run

npm install
# to install all dependencies

Esmodule

import Dative from 'dativejs';
var app = new Dative({
  el: "#app",
  template(){
    return `
      <h1>Hello world</h1>
    `
  }
})
app.render();

CommonJs

var Dative = require('dativejs');
var app = new Dative({
  el: "#app",
  template(){
    return `
      <h1>Hello world</h1>
    `
  }
})
app.render();

Dative has some inbuilt directives to help your project more fast

var app = new Dative({
  el: "#root",
  data:()=>({
    html: "<p>Hello DativeJs</p>"
  }),
  template: function(){
    return `
      <h1 dv-html='html'></h1>
    `
  }
}); 
app.render()

Output

<h1><p>Hello DativeJs</p></h1>

List of all the inbuilt directives

dv-text <!-- it's used to insert text content from the data into the textContent of an element in the template -->
dv-html <!-- this directive is used to insert html content from the data into the innerHTML of an element in the template -->
dv-on <!-- it's used to handle event -->
dv-on:<event> <!-- it's also used to handle event -->
dv-bind:<attribute> <!-- it's used to bind attributes from the data to the element 
example dv-bind:src="img"-->
<!-- :<attribute> short form for dv-bind:<attribute> -->
:<attribute> <!-- it's also used to bind attributes from the data to the element but it's the short form for the dv-bind:<attribute>
example :src="img"-->
dv-if <!-- it conditionally render the template based on the truthy-ness of the given expression value -->
dv-show <!-- this directive toggle’s the element's display CSS property based on the truthy-ness of the given expression value. -->
dv-ref <!-- this directive is used to reference an element -->
:style <!-- it's used to pass an object or an array  to dynamically update styles. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names. -->
:class <!-- it's used to pass an object or an array to dynamically update classes -->

Build Ui With DativeJs

import Dative from 'dativejs';


var app = new Dative({
  el: '#root',
  template: `
    <h1>Hello world</h1>
    <p>Welcome {{ user }} </p>
 `,
  data(){
    return {
      user: "Tobithedev"
    }
  }
})
app.render()