Template Syntax

Unlike many frameworks, requery-js doesn't introduce a custom template syntax. Instead, it works with standard HTML and uses data attributes to mark interactive elements. This makes it compatible with visual website builders and keeps your markup clean and semantic.

Written By Joel

Last updated About 1 month ago


Marking Interactive Elements

Use the rq attribute to tag elements that should be interactive or reactive:

<p rq="count">0</p>
<button rq="button">Click me!</button>

Tagged elements can then be queried and manipulated in your component's setup function:

component.query("count").text(() => store.count);
component.query("button").on("click", () => {
  store.count++;
});

Component Props

Props are passed to components using the prop: prefix on attributes:

<rq-counter prop:max="5">
  <!-- Component content -->
</rq-counter>

Hiding Initial State

Use the rq-cloak attribute to hide elements until they are initialised:


/* Hide elements until they are initialised */
[rq-cloak='hidden'] { display: none }

/* Hide elements but maintain layout */
[rq-cloak='invisible'] { visibility: hidden }

Could not load article.

Could not load article.