Tutorial

Build a todo app

• 1. Set up the project: Create a ShadowJS app with create-shadow-app, start the dev server and replace the starter page with the first lines of the todo app.
• 2. Write the first component: Pass props to a component, keep a todo in a store and update one checkbox and one class when it changes.
• 3. Render a list: Keep many todos in one store, render them with For and Show, and watch a derived count stay in sync.
• 4. Add todos with a form: Build a controlled form with useStore, handle submit, focus the input on mount and add new todos to the list.
• 5. Filters and derived state: Show all, active or done todos with a memo, derive counts from the store and clear completed items.
• 6. Persistence and effects: Load todos from localStorage after mount, save them with a deferred effect, sync other tabs and clean up listeners.
• 8. Server render and build: Render the todo app to HTML with renderToString, hydrate it in the browser, run it through Vite's SSR hooks and produce a production build.