Flext

Flext is a lightweight extension over Handlebars. It introduces a small DSL for handling macros and modules to help create dynamic templates. The library is compiled to both ESM and CommonJS bundles and can be embedded in other projects such as Vue components.

• Demo: Available at CodeSandbox
• Documentation: Available at TrustMe Wiki.

Flext is maintained by TrustMe.

Example

import { Flext } from '@trustme24/flext';

const template = `
  {{!-- @v "1.0.beta3" --}}
  {{!-- @use "put" --}}

  <div class="text-center text-red-500">{{ put data.helloWorld 'No hello world...' }}</div>
`;

const flext = new Flext(template, {
  data: { helloWorld: 'Hello World!' },
});

document.body.innerHTML = flext.html;

Installation

1. Install dependencies:

npm i @trustme24/flext tailwindcss

2. Add the CSS import in your CSS file:

@import "@trustme24/flext/index.css";

3. You're all set!

Tests & Demo

• Unit Tests:

npm run test

• Test App:

npm run test:app

Flext by Kenny Romanov
TrustMe