Creating a JSX Preview in Next.js

To create a preview like the one above is surprisingly simple.

To start, we’ll need to create a javascript file with the default function under the pages folder.

Next, we’ll need to add a react hook, specifically, useState.

useState will allow our variables to be changed anytime.

Then, we’ll need to add a textarea to type in and a h1 to see the preview.

Now we have to set the onChange attribute on the textarea to setTextValue. This will change the textValue variable to whatever is in the textarea.

Next, we’ll add the textValue variable to our h1 element.

Now we have a preview of our text input!

Your probably wondering how I transformed the textValue string to jsx. To do so, we’ll need to download react-jsx-parser (Link:https://www.npmjs.com/package/react-jsx-parser) through npm.

Then, we have to import the JsxParser component and use it in our return statement.

Then, we’ll need to use the JsxParser jsx attribute to inject our code

That’s all we needed to do!

One could use this parser to display jsx code from a database or use this as a better visualizer for testing new UI.