Edit tutorial

Basic Component

Welcome to the Qwik tutorial. This is a series of short tutorials that will help you get started with Qwik. The introduction is a set of problems that will teach you how to create a component, store data, attach listeners, and fetch data from the server. So let's get started.

Creating a component

Use the editor on the right to create a UI that looks something like this:

GitHub organization: __________
- Qwik
- Partytown

The HTML code for this component should be this:

<main>
  <p>
    <label>
      GitHub organization:
      <input value="QwikDev" />
    </label>
  </p>
  <section>
    <ul>
      <li>
        <a href="https://github.com/QwikDev/qwik">Qwik</a>
      </li>
      <li>
        <a href="https://github.com/BuilderIO/partytown">Partytown</a>
      </li>
    </ul>
  </section>
</main>

You can click the "Show Me" button in the bottom left to see the completed solution.

Building preview

Refreshing App output

Compiling the latest client and SSR result for your current code.

No console activity yet

Interact with the app or trigger a render to see client and SSR messages here.