01 - First page

Start with the smallest Todo app shell. It has a Sercrod host and data, but it does not show any Todo items yet.

Code

<script src="/sercrod.js"></script>

<serc-rod data='{"draft":"","todos":[]}'>
	<h2>Todo</h2>
</serc-rod>

How to read it

• draft will hold the text the user is typing.
• todos will hold the Todo list.
• The page only shows the heading for now.

Result

Next

The next step will put a value in draft and display it.

Next: Data and output

Back to Tutorial index