Use @runno/runtime to execute code within HTML.
The runtimes currently supported by @runno/runtime are python, ruby, quickjs,
sqlite, clang, clangpp, and php. For this example, we will use python.
Add the library
yarn add @runno/runtime
Add CORS settings to next.config.js
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "Cross-Origin-Opener-Policy",
value: "same-origin",
},
{
key: "Cross-Origin-Embedder-Policy",
value: "require-corp",
},
],
},
];
},
/* eslint-disable react/no-unescaped-entities */
import "@runno/runtime";
const RunnoComponent = () => {
// @ts-ignore
const runPythonScript = `
print("Hi")
number = int(input("Choose number"))
if number % 2 == 0:
print("That number is even")
print("Done")
`;
return (
<runno-run runtime="python" editor controls>
{runPythonScript}
</runno-run>
);
};
export default RunnoComponent;
Add the Component to a Page Disable SSR
import dynamic from "next/dynamic";
const DynamicRunnoComponent = dynamic(
() => import("../../../components/RunnoComponent"),
{
ssr: false, // Disable SSR
loading: () => <p>Loading...</p>,
}
);
const PythonExample = () => {
return (
<div>
<h1>is even ?</h1>
<DynamicRunnoComponent />
</div>
);
};
export default PythonExample;