add moappi/json2html and htmx

[ghost]

intro:

• Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js.
• we can create a webapp in a simple way with json2html, api-restful, htmx

input

<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.1.0/json2html.min.js"></script>

<script>
const button = {'<>':'button', 'class':'button', 'hx-get':'https://pokeapi.co/api/v2/pokemon/ditto',' hx-swap':'outerHTML', text:'Click Me'};
document.write(json2html.render({},button));
</script>

output

output 1: html

<button class="button" hx-get="https://pokeapi.co/api/v2/pokemon/ditto" hx-swap="outerHTML">Click Me</button>

output 2: render-html-in-dom-browser

output 3: render-html-in-browser

output 4

why?

• This allows creating complex applications with json2html and htmx format.
• this allows tighter integration with two open source tools
• this makes life easier for web developers to build websites, webapps: browser-extensions, pwa(progressive-web-application), spa(single-page-application), mpa (multi-page-application) without frameworks(react, vue-js etc)
• that's my question and my last idea what last would like to contribute json2html
• with this feature json2html - we can use http calls with json return to structure web applications through json format, both as a response and as a rendering process.

another idea

<script>
   json2html.component.add("status",{'<>':'span','text':'${status}'});
</script>

<button class="button" hx-get="https://pokeapi.co/api/v2/pokemon/ditto" hx-swap="outerHTML" hx-j2h-componet="status">Click Me</button>

[ghost]

Hi rajasegar, thanks!