Можно ли создать динамическую страницу с использованием textarea и react компонентов?

Question

[Herberito Galustyan]

Я хочу использовать textarea поле и компоненты react для создания формы. Компоненты будут записаны внутри текстовой области, а структура компонентов будет отображаться внизу. Я хочу сохранить эту строку в базе данных, чтобы я мог ее получить. позже и каким-то образом преобразовать его в страницу jsx. в основном, все, что я сказал, очень похоже на markdown, но все, что я хочу сделать, это использовать только реагирующие компоненты. Разработаны ли популярные пакеты для этого ?

пример

const Prism = ({ language }) => {
  return <div style={{ color: "#45E700" }}>{language}</div>;
};

export default function App() {
  const [text, setText] = useState(`<Prism language={"javascript"}/>`);
  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
     <Render src={text} />
    </div>
  );
}