How do you get an HTML string from JSX without React. I'm using SolidJS for example

Question

I'm not using React, so this won't work

ReactDomServer.renderToString(<div>p</div>)

I'm currently rendering the jsx in a hidden div with an id on the browser and then using

document.getElementById(id).outerHTML

to get the HTML, but I'm wondering if there's a more elegant solution

score 2 · Accepted Answer · answered Sep 10 '22 at 02:33

In SolidJS components actually render as plain DOM nodes, so you can actually just use all of the DOM nodes properties

In your specific example that could be something like

const SomeComponent = <div></div>;
console.log(SomeComponent.outerHTML) //this will output -> "<div></div>"

I hope this helps!

score 0 · Answer 2 · answered Aug 29 '22 at 12:52

0

I'm currently rendering the jsx in a hidden div with an id on the browser and then using

document.getElementById(id).outerHTML

to get the HTML, but I'm wondering if there's a more elegant solution

answered Aug 29 '22 at 12:52

chad steele

828
9
13

2

Why have you posted information supplemental to your question as an answer? – Matt Morgan Aug 29 '22 at 12:57
1

It is a possible solution. It's also supplemental to the question. It's both. – chad steele Aug 29 '22 at 13:00

score 0 · Answer 3 · answered Sep 11 '22 at 06:37

JSX is not directly supported by the browser so it requires a compiler to be compiled into proper HTML that means you have to use a library like Solid, React ect.

In Solid, you don't need to render it into a hidden div, just don't output it to the DOM.

import { render, renderToString } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}


function App() {
  
  let el = <Counter />

  const increment = () => {
    console.log((el.outerHTML));
  };

  return (
    <button type="button" onClick={increment}>
      get content
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

There is renderToString in Solid to support server side rendering, but it appears it does not work in browsers.

How do you get an HTML string from JSX without React. I'm using SolidJS for example

3 Answers3