hmpl-language / hello-hmpl-starter

A minimal starter template to get started with HMPL

Hello HMPL Starter

A minimal starter template to get started with HMPL.

Setup

npx degit hmpl-language/hello-hmpl-starter hello-hmpl
cd hello-hmpl
npm install

Project Structure

hello-hmpl/
|--mock/
|--public/
|--src/
|   |--hmpl/
|   |--main.js
|--index.html
|--package.json
|--vite.config.js
|--vite-plugin-hmpl.js
|--README.md

Getting Started

Create a new HMPL template in src/hmpl/HelloWorld.hmpl:

<div>
  <div>
    {{
      src: "/api/hello",
      indicators: [
        { trigger: "pending", content: "<p>Loading...</p>" },
        { trigger: "rejected", content: "<p>Error!!</p>" }
      ]
    }}
  </div>
</div>

Then, load it into src/main.js:

import helloWorld from "./hmpl/HelloWorld.hmpl";

const { response } = helloWorld();

document.body.appendChild(response);

Now, your UI will dynamically render data from the server!

Learn More

• HMPL Docs
• Examples

Contributors

This project was created by Saptarshi Mula. Many thanks to him!