Previewing Pyscript without have to preview in browser like Firefox/Chrome

Hello everyone,

I am currently work to manage my company's database and I already use Pyscript as frontend and Flask and Matplotlib to create graph/chart. I already successfully add pyscript to Newpage's HTML element, but I have to open it on browser because Newpage will show blank background on HTML element.

Is there any way to display Pyscript on realtime editor just like Javascript? Thank you.

This is my testing code:

--

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python in Browser</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2022.12.1/pyscript.css">
<script defer="defer" src="https://pyscript.net/releases/2022.12.1/pyscript.js"></script>

<py-config>

packages = ["matplotlib"]
plugins = ["https://pyscript.net/latest/plugins/python/py_tutor.py"]

</py-config>
<py-script>

# Python Code

# importing the matplotlib library
import matplotlib.pyplot as plt
fig, ax = plt.subplots()
# x axis
x = ["Python", "C++", "JavaScript", "Golang"]
# y axis
y = [10, 5, 9, 7]
plt.plot(x, y, marker='o', linestyle='-', color='b')
# Naming the x-label
plt.xlabel('Language')
# Naming the y-label
plt.ylabel('Score')
# Naming the title of the plot
plt.title('Language vs Score')
display(fig, target="matplotlib-lineplot")

</py-script>