Templating

Graphane templates combine SVG template markup with data by powerful directives, similar to Angular or Vue. Rendering is done efficiently at runtime and does not require a compiler or transpiler as other frameworks.

SVG template

You must include the SVG template inside the <g-composer></g-composer>. This is an extension of SVG standard format with new directives. Data binding makes SVG graphics dynamically. You would be able to bind data from the data sources to the SVG. When the data changes, the SVG is automatically updated to reflect the changes in the rendered SVG.

You can use directives to attributes, animations, transitions, event handling, and other interactions within the SVG components.

• g-bind (or the shorthand :): dynamically bind values to attributes and styles.
• g-for: render the element block multiple times based on the data.
• g-if: show an element conditionally.
• g-content: add the element content.
• g-on (or the shorthand @): handle events.

Graphane Templating would enable the creation of interactive SVG graphics by supporting event handling. Developers could attach event listeners to SVG elements and respond to user interactions, such as clicks, hovers, or touches.

• g-on (or the shorthand @): attach an event listener to the element.

Example

In this example, a figure is shown many times based on the value. If the value is changed, the display changes automatically.