Sercrod Guide

This guide walks you through Sercrod step by step: what it is, how it thinks about HTML attributes, and how to add it to an existing page without rewriting everything.

What you will learn

• How Sercrod treats HTML attributes as the primary interface.
• How to add Sercrod to an existing static page.
• How to bind data and events using directives.
• How to think about Sercrod next to frameworks like React or Vue.

Before you begin

This guide assumes that you:

• Know basic HTML and a little JavaScript.
• Can edit files in a text editor and open them in a browser.
• Optionally have Node.js installed, if you want to try SSG/SSR later.

Guide chapters

You can read the guide from top to bottom, or jump directly to the chapter you need. If you are new to Sercrod, start with the first page and follow the order below.

1. Your first Sercrod page
   Start from a single HTML file and add one directive.
2. More data and simple input
   Use data, *input, and a small counter.
3. Conditions and loops
   Render conditionally and repeat elements with *if and *for.
4. Basic form controls
   Bind checkboxes, radios, and selects to Sercrod data.
5. Lifecycle basics
   Save and load data with *save and *load.
6. Lifecycle (advanced)
   Work with *fetch, *post, and server roundtrips.
7. Binding and events (advanced)
   Deeper patterns for events, updates, and nested hosts.
8. Nested Sercrod
   Compose multiple Sercrod hosts and share data between them.

Next: Your first Sercrod page

If you are ready to start, begin with a single static HTML file and add just one directive, so that you can see Sercrod working without any build tools.

Go to: Your first Sercrod page