⚡️ Invented as an alternative to existing libraries, allowing you to add new functionality to existing non-JavaScript projects without using build systems. The syntax of template literals is very simple and already familiar. So why not use all its power, right?

📕 Click here to read full documentation

Simple example

  const { ast: html } = HierParser
  class App extends Hier.BaseComponent {
    render() {
      return html` <h1>Hello</h1> `
    }
  }
  Hier.render(App, document.getElementById("app"))

Component with state

const { ast: html } = HierParser
class App extends Hier.Component {
  _state = { liked: false }
  render() {
    const { liked } = this.state
    if (liked) return `You liked this!`
    
    return html`
      <div> Lets try to like this: </div>
      <button onClick=${() => this.setState({ liked: true })}> ❤️Like </button>
    `
  }
}

document.addEventListener("DOMContentLoaded", () => {
  Hier.render(App, document.getElementById("app"))
})

Wrapper component

const { ast: html } = HierParser
class Card extends Hier.BaseComponent {
  render() {
    const { children, header, footer } = this.props

    return html`<div class="card">
      ${header && html`<div class="card-header"> ${header} </div>`}
      <div class="card-body"> ${children} </div>
      ${footer && html`<div class="card-footer"> ${footer} </div>`}
    `
  }
}

class App extends Hier.Component {
  render() {
    const header = html`<div> Some cool <strong>header</strong> </div>`
    const footer = html`<a href="#" class="btn btn-primary"> Go somewhere </a>`

    return html`
      <${Card} header=${header} footer=${footer}>
        <h5 class="card-title"> Card title here </h5>
        <p class="card-text"> And some awesome text here. </p>
      </Card>
    `
  }
}

Working with react components

const { react: r } = HierReact
class LikeButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = { liked: false }
  }

  render() {
    const { number } = this.props
    if (this.state.liked) {
      return `You liked this ${number}`
    }
    return r`<button onClick=${() => this.setState({ liked: true })}>Like ${number}</button>`
  }
}

class App extends React.Component {
  render() {
    return r`
      <div>
        <h1> Header </h1>
        <fieldset style=${{ backgroundColor: "#f4f4f4" }}>
          <legend> Buttons list </legend>

          ${new Array(10).fill(0).map(
            (item, idx) => r`<div key="item-${idx}">
              <${LikeButton} number=${idx} />
            </div>`
          )}
        </fieldset>
      </div>
    `
  }
}

✅ More examples with working applications you can find in examples folder