Multi-Backend Placeholder Tutorial

1

Python Placeholder 1

This placeholder step verifies that a Python step can use the output panel.

Starter files

python-one.py

print("Python placeholder one")

2

React Placeholder 1

This placeholder step verifies that a React step can use the live preview panel.

Starter files

react-one/styles.css

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem;
}

.placeholder-card {
  border: 2px solid #2774ae;
  border-radius: 6px;
  padding: 1rem;
}

react-one/App.jsx

function App() {
  return (
    <main>
      <section className="placeholder-card" aria-labelledby="react-one-title">
        <h1 id="react-one-title">React placeholder one</h1>
        <p>This preview is rendered by the React backend.</p>
      </section>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

3

Node.js Placeholder 1

This placeholder step verifies that a Node.js step can return to the output panel.

Starter files

node-one.js

console.log("Node placeholder one");

4

React Placeholder 2

This placeholder step verifies that switching back to React rebuilds the preview.

Starter files

react-two/styles.css

main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem;
}

.placeholder-card {
  border: 2px solid #2e7d32;
  border-radius: 6px;
  padding: 1rem;
}

react-two/App.jsx

function App() {
  return (
    <main>
      <section className="placeholder-card" aria-labelledby="react-two-title">
        <h1 id="react-two-title">React placeholder two</h1>
        <p>This preview is rendered after leaving Node.js.</p>
      </section>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

5

Python Placeholder 2

This placeholder step verifies that switching back to Python restores the output panel.

Starter files

python-two.py

print("Python placeholder two")

6

Node.js Placeholder 2

This placeholder step verifies that a later Node.js step remains usable.

Starter files

node-two.js

console.log("Node placeholder two");

Step 6 — Knowledge Check

Min. score: 80%

1. Which backend runs this final placeholder step?

Pyodide Python
Pyodide runs the Python placeholder steps and uses the output panel.
React live preview
React runs the preview placeholder steps inside the live preview panel.
WebContainer Node.js

This step uses the WebContainer Node.js backend, so its starter file runs with Node and writes to the output panel.