basics

Hello World

A focused primitive example showing the core behavior in a small component.

Example overview

This prerendered document exposes Hello World as navigable HTML. The interactive playground experience is enhanced later by the client bundle.

Source preview

import { PickComponent, PickRender, Reactive } from "pick-components";

@PickRender({
  selector: "hello-example",
  styles: `
    :host {
      display: block;
    }

    p {
      margin: 0;
      color: #2563eb;
      font-size: 1.1rem;
      font-weight: 600;
    }
  `,
  template: `<p>Hello, {{name}}!</p>`,
})
class HelloExample extends PickComponent {
  @Reactive name = "Somebody";
}