Nested Sercrod

Sercrod does not require a single global host. You can place several <serc-rod> hosts on the same page, and you can also nest a host inside another one.

• share one piece of data between parent and child hosts,
• use nested hosts for live previews,
• keep independent hosts side by side when you do not want to share state.

1. Parent data in a nested host

When you put a <serc-rod> inside another host, the inner host can read fields from the parent host's data. This is the basic building block for nested Sercrod.

Code

<serc-rod data='{"text":"Hello from parent"}'>
	<section>
		<h2>Outer host</h2>
		<p>%text%</p>
	</section>

	<section>
		<h3>Inner host</h3>
		<serc-rod>
			<p>%text%</p>
		</serc-rod>
	</section>
</serc-rod>

Sample

The inner <serc-rod> does not define its own data. It reads text from the parent host, so both places show the same value.

2. Live preview with a nested host (input)

Next, connect a form control to a field in data using *input, and let a nested host render a live preview.

Code

<serc-rod data='{"text":""}'>
	<section>
		<h2>Editor</h2>
		<p>
			<label>
				Text:
				<input type="text" *input="text" placeholder="Type here...">
			</label>
		</p>
	</section>

	<section>
		<h3>Preview (nested host)</h3>
		<serc-rod>
			<p>Preview: %text%</p>
		</serc-rod>
	</section>
</serc-rod>

Sample

The *input="text" directive connects the input value to the field text in the parent host's data. When the value changes, Sercrod updates that field and re-renders the nested host, so the preview updates while you type.

3. Live memo preview (textarea)

The same pattern works for longer text with a <textarea>. The parent host stores the memo; the nested host renders a formatted preview.

Code

<serc-rod data='{"memo":""}'>
	<section>
		<h2>Memo</h2>
		<p>
			<label>
				Memo:
				<textarea rows="4" *input="memo" placeholder="Write a memo..."></textarea>
			</label>
		</p>
	</section>

	<section>
		<h3>Preview (nested host)</h3>
		<serc-rod>
			<p>Preview:</p>
			<pre>%memo%</pre>
		</serc-rod>
	</section>
</serc-rod>

Sample

%memo%

Here again, *input="memo" updates the parent host's data.memo. The nested host reads the same field and re-renders, so the preview follows the textarea content.

4. Multiple independent hosts on one page

You do not have to nest hosts every time. Often it is simpler to put separate hosts side by side and keep their state independent.

Code

<serc-rod data='{"title":"Left panel","count":0}'>
	<section>
		<h2>%title%</h2>
		<p>Count: %count%</p>
		<p>
			<button type="button" @click="count++">+1</button>
		</p>
	</section>
</serc-rod>

<serc-rod data='{"title":"Right panel","count":0}'>
	<section>
		<h2>%title%</h2>
		<p>Count: %count%</p>
		<p>
			<button type="button" @click="count++">+1</button>
		</p>
	</section>
</serc-rod>

Sample

Both hosts use a field named count, but each one has its own data. Clicking the left button does not change the right counter, and the other way around.

5. When to use nested or multiple hosts

Some common patterns are:

• Nested hosts: one parent host owns the data and layout, child hosts render previews or small widgets from the same fields.
• Multiple independent hosts: each card, column, or demo has its own host and state.

If several parts need to share a field, put that field in a higher host and let nested hosts read it. If they do not need to share anything, keep them as separate hosts.

From here, you can move on to the Reference for more detailed rules and options.