Skip to content
forma.
v3.0
☰

Lesson 07 / 9

Activate what needs interaction

Keep the server’s DOM and attach behavior at declared island boundaries.

What activation adds

Rust has already sent the counter as HTML. Activation attaches reactive behavior to that existing counter, so Add one can change its displayed number immediately without requesting another page. The rest of the document remains ordinary HTML.

Your exercise

  1. Open the island at 7 and choose Add one. The browser count becomes 8 while Initial server value remains 7. There is no save request.
  2. Refresh: it returns to 7 from the URL. A signal holds memory for the current page; it is not browser storage or a server record.
  3. Enter 17 in the separate form and submit. Rust renders a new page starting at 17. This form uses the number you enter, not the count from your previous clicks.
  4. Compare the no-JS route. Its form still asks Rust for new HTML, but it has no local Add one behavior or executable browser entry.

These are two ways to interact with server-rendered HTML. In the next lesson, you will add an explicit save request so accepted edits survive reloads.

Initialize from the server’s props

function Counter(props: CounterProps) {
  const [count, setCount] = createSignal(props.count);
  // Render the matching island structure.
}
activateIslands({ Counter });

The signal starts from the same value Rust used for the initial HTML. activateIslands connects the registered component to its declared island. Neither step creates an automatic synchronization service. Use the lab’s complete source for the compiler-visible registration and matching element structure. Don’t mount a new client app over the native root.

Verify behavior, not a status attribute

A reliable adoption test captures the original element before loading its script, waits for an actual interaction, and checks that the node is still the same object. The original pending marker alone is not a readiness signal.

Continue to the next lesson

Find your next answer.

Search Forma 3.0 documentation, guides and examples.