Create and style a textarea and an iframe

Now let’s set up HTML and styles for your app. You’ll need to build two areas: a textarea in which the code will be featured, and an iframe to show the rendered output.

First, let’s create a file called loading.html the entire contents of which are as follows:

Installing dependencies...

We will add this file to an iframe that will be visible in the preview only when the WebContainer is getting ready. After that, it will be replaced with the WebContainer output.

We also need to enable access to the textarea and iframe elements. At the bottom of the main.js file we’ll add code that will locate the two elements.

Now, let’s build a scaffolding by adding HTML to the #app element in main.js:

import "./style.css";


document.querySelector("#app").innerHTML = `
  <div class="container">
    <div class="editor">
      <textarea>I am a textarea</textarea>
    </div>
    <div class="preview">
      <iframe src="loading.html"></iframe>
    </div>
  </div>
`;


/** @type {HTMLIFrameElement | null} */
const iframeEl = document.querySelector("iframe");


/** @type {HTMLTextAreaElement | null} */
const textareaEl = document.querySelector("textarea");

Let’s make it look nicer now. Replace the contents of style.css with the following code:

* {
  box-sizing: border-box;
}


:root {
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  color: black;
  background: white;
}


body {
  margin: 0.5rem 1rem;
}


header {
  text-align: center;
}


header h1 {
  margin-bottom: 0;
}


header p {
  font-size: 1.5rem;
  margin-top: 0;
}


iframe,
textarea {
  border-radius: 3px;
}


iframe {
  height: 20rem;
  width: 100%;
  border: solid 2px #ccc;
}


textarea {
  width: 100%;
  height: 20rem;
  resize: none;
  background: black;
  color: white;
  padding: 0.5rem 1rem;
  margin-bottom: 10px;
  font-size: 0.9rem;
  line-height: 1.2rem;
  font-family: Menlo, Cascadia Code, Consolas, Liberation Mono, monospace;
}


.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: 100%;
  width: 100%;
}


.wc {
  -webkit-text-fill-color: #0000;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right,#761fac 0,#8a19a9 20%,#d900a5 70%,#d917a3 100%);
  filter: drop-shadow(0 1px 0 #fff);
  font-weight: 800;
  color:#69f5ff;
  text-decoration: underline;
}


.docs {
  margin-left: 5px;
  text-decoration: none;
  font-weight:600;
  color:#333;
  font-size: 80%;
  text-decoration: underline;
}
What we are building
Setting up WebContainers
Files
Preparing Environment
No preview to run nor steps to show