[reactjs] Loading basic templates / includes from HTML-syntaxed files (in addition to existing inlining in JSX)

[vadimkantorov]

Is there an existing feature request / issue to vote it up?

I guess this must have been discussed in the past, I'm looking for a way to store the HTML templates in separate HTML files (that is without import / export directives, function definitions etc), like asked at https://stackoverflow.com/questions/45600891/reactjs-how-to-put-the-html-template-in-a-separate-file

This is would be for converting existing templated static HTML templates from SSG engines (like Jekyll) to React/Nextjs. And also probably a better fit for HTML/CSS-generating LLMs.

Where we first ask to generate HTML/CSS with some bogus data, and then minimally convert these HTMLs into Reactjs templates / components, while still keeping them in HTML syntax without turning it fully into JSX

In other words, is there any support (or extension points for that) for defining rendering templates in formats other than JSX/JS? E.g. jinja2 / liquid / mdx / vuejs templating formats?

---

Maybe using https://react.dev/reference/react/createElement#creating-an-element-without-jsx under the hood for parsing the loaded HTML (like in https://stackoverflow.com/a/50526629/445810)

Also seems related: https://github.com/roonie007/react-sfc

[Dev-axay18]

Not directly.

React is built to use JSX (or React.createElement) to define UI. It doesn’t natively support templating engines like .html, .jinja2, .liquid, or .vue.

But you can still work with HTML templates in React with some clever workarounds.

1. dangerouslySetInnerHTML
   You can inject raw HTML into a React component like this:

<div dangerouslySetInnerHTML={{ __html: yourHtmlString }} />

• Good for pre-rendered templates.
• But be very careful with security, sanitize the HTML to avoid XSS attacks.

---

2. Use an HTML → React Parser
   There are libraries that convert raw HTML strings into React elements:

• html-react-parser
• react-html-parser

import parse from 'html-react-parser';

function MyComponent() {
  const html = '<h1>Hello</h1><p>This is raw HTML</p>';
  return <div>{parse(html)}</div>;
}

---

3. Convert HTML to JSX Automatically
   Write a small script (or use LLMs) to convert .html files to .jsx. You can:

• Remove class → replace with className
• Close all tags properly (e.g., )
• Ensure the output is JSX-safe.

Or use tools like:

• htmltojsx

• ChatGPT

[vadimkantorov]

Does there exist any parser lib for parsing liquid/vuejs/jinja2/some HTML-based template files into React element? (including variable substitution and maybe loops)

[Dev-axay18]

Yes, there are a few libraries and tools that can parse HTML-based templates (like Liquid, Jinja2, Vue-style templates) into React elements, though with some limitations, especially around logic like loops and conditionals.

---

Such Libraries

• html-to-react
  Parses raw HTML into React elements. Doesn’t support logic (like for, if) out of the box.

• liquidjs
  A JavaScript implementation of the Liquid template engine. You can render the template string and then use it in React.

• nunjucks
  A JS templating engine inspired by Jinja2. Good for rendering server-side templates into strings.

---

the Approach I Suggest

1. Render the template string using LiquidJS or Nunjucks.
2. Use html-to-react or html-react-parser to convert the output HTML into React components.

import { Liquid } from 'liquidjs';
import parse from 'html-react-parser';

const engine = new Liquid();
const template = 'Hello, {{ name }}!';
const rendered = await engine.parseAndRender(template, { name: 'Akshay' });
const reactComponent = parse(rendered);

[SaurabhCodesAI]

Really appreciate the list of tools LiquidJS + html react parser is clever.
That said, isn’t this kind of pipeline a bit brittle once you step into anything beyond static interpolation?
For example, conditional logic, loops, or component level state don’t these end up getting lost or reimplemented after parsing?
I’m curious why the React ecosystem hasn't invested more in native support for declarative, non-JSX templating especially when other ecosystems (Vue, Astro, Svelte) offer HTML like syntax without compromising component logic.
Do you think JSX has become more of a bottleneck than a benefit in certain workflows (like LLM based generation or SSG migrations)?

[SaurabhCodesAI]

This feels like trying to bring back templates into an architecture that deliberately killed them.
React’s whole mental model treats UI as a function of state, not as precompiled structure.
So maybe the deeper question isn’t how do I load HTML files into React but rather:
Should we be building tooling that turns HTML fragments into component functions with embedded reactivity instead?
Like, what if .html was just another compile target for a thin reactivity layer? JSX is one… but maybe there are others.
Curious if this has been explored in the React Compiler work or even as a Babel macro space.

[vadimkantorov]

This feels like trying to bring back templates into an architecture that deliberately killed them.

Somewhat. The origin of my question is consuming some simple existing static HTML templates to be used within a larger React / JSX app. So the idea would be not to develop new functionality as these liquid/vuejs/jinja2 templates, but mainly to load them for gradual transitioning and have some interop and not having to rewrite everything to get started.

Also, now HTML has custom elements / WebC / <template> / <slot> - maybe at least these fragments could be loaded into React and turned into React-proper Components (which can be referenced in other JSX, rendered etc)

[SaurabhCodesAI]

That makes complete sense, and I think your framing using static HTML fragments as a migration layer into React is actually more profound than it sounds at first.

Because if we zoom out, what you're suggesting touches on a question that React has quietly avoided
What is the minimal unit of component intent that React should understand?

JSX gives us structure, but it’s not portable. Static templates give us structure but no behavior.
What’s missing is an intermediate form a shape that’s expressive enough to describe components declaratively, but abstract enough to exist outside JSX or runtime JS.

What if the future isn’t about reusing HTML in React,
but defining a markup grammar that React (or any renderer) can semantically hydrate?

A kind of pre reactive component DSL, closer to HTML but designed for compiler level understanding not runtime rendering.

Not a template engine. Not a transpiler.
A semantic bridge layer.

I wonder if the React Compiler team is thinking that far ahead or if we’re still assuming JSX is the only frontier.

[shahdinsalman23]

React itself doesn’t natively load or import raw .html templates the way server-side templating engines do.
If you want to use external HTML files in addition to JSX, here are a few approaches:

Import as a string (build-time)

With Webpack/Vite, you can use an HTML loader or raw-loader to import the file as a string, then set it with dangerouslySetInnerHTML.

import myTemplate from './template.html?raw';

export default function MyComponent() {
return <div dangerouslySetInnerHTML={{ __html: myTemplate }} />;
}

Fetch at runtime

Store your HTML files in public/ and fetch them dynamically.

const [html, setHtml] = useState('');
useEffect(() => {
fetch('/template.html')
.then(res => res.text())
.then(setHtml);
}, []);
return <div dangerouslySetInnerHTML={{ __html: html }} />;

Use a templating library

If you need includes/partials, you could preprocess HTML using a tool like Handlebars, Nunjucks, or EJS before feeding it into your React component.

Important: This bypasses React’s JSX compilation benefits and could introduce XSS risks, so sanitize HTML when dealing with user-generated content.