Basics · Introduction

The three sections

A .sumi file has up to three tagged sections, and everything left over is the template:

• <script> — Go. Signals, functions, and prop declarations live here.
• <style> — CSS, scoped to this component.
• the template — the markup, outside any tag.

All three are optional; the earlier lessons had only a template. This app uses all three. The script holds a signal, name; the style colours the heading; the template reads the signal with {name} and lays the page out.

Your turn

Restyle the heading. In <style>, change h1’s color from green to magenta (or any colour name), then press Run.

Solve shows one answer; Reset restores the start.