How do you render dynamic HTML or SVG in Qwik?

There are two primary methods for rendering dynamic HTML or SVG in Qwik: one involves embedding inline HTML or SVG code, and the other utilizes components and services provided by the Qwik library. Let's explore both methods in detail and provide a concrete example to illustrate the implementation.

Method 1: Inline HTML/SVG

In Qwik, you can directly embed HTML or SVG code within the JSX of a component. By dynamically updating specific attributes or content of the embedded code, you can achieve dynamic effects. This approach is ideal for simple animations or when the dynamic aspects are straightforward.

Example:

Consider a scenario where we need to dynamically display circles of different colors; we can create a Qwik component that accepts a color parameter and uses it within the SVG.

jsx
import { component$ } from '@builder.io/qwik';

export const Circle = component$((props: { color: string }) => {
  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill={props.color} />
    </svg>
  );
});

Method 2: Using Qwik Library APIs

Qwik provides built-in APIs such as useStore for managing application state, which simplifies and enhances dynamic rendering. You can leverage these APIs to respond to user interactions or other events, dynamically updating page content.

Example:

We can create a component featuring a button and an SVG graphic. When the button is clicked, the graphic's color changes based on the current state.

jsx
import { component$, useStore } from '@builder.io/qwik';

export const DynamicSvg = component$(() => {
  const store = useStore({
    color: 'red',
  });

  return (
    <>
      <button
        onClick$={() => {
          store.color = store.color === 'red' ? 'blue' : 'red';
        }}
      >
        Change Color
      </button>
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill={store.color} />
      </svg>
    </>
  );
});

In this example, useStore creates a reactive store object holding the current color state. Upon button click, modifying the color property within the store triggers a re-render of the interface.

Summary

By employing either of these methods, you can render dynamic HTML or SVG within the Qwik framework. The choice depends on the specific application context and the complexity of dynamic content. The inline method is best for quickly implementing simple dynamic effects, while using Qwik APIs enables robust management of complex states and sophisticated interactive dynamic experiences.