Allow filters to render React components

[h0jeZvgoxFepBQ2C]

Hi,

I would like to do following things:

import React from 'react'
import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'

export default function debug(param) {

    return <JsonView 
      src={param}  
      collapsed={1} 
      collapseStringMode="directly" 
      collapseStringsAfterLength={20}
    />
}


class MyClass {
    this.engine = new Liquid();
    this.engine.registerFilter("debug", debugRenderer);
}

const testString = "{{ userparam | debug }}"

But this doesn't work, since it only outputs me "Object [Object]"? And when I use renderToString with import { renderToString } from "react-dom/server"; it works more or less, but its not iteractive (nothing happens when I click on some features)?

[harttle]

That's by design. Liquid is a template engine, while React is a MVVM framework.