1 files changed, 56 insertions, 0 deletions
diff --git a/js/seed/README.md b/js/seed/README.md
index 7d0ecec..8159cb3 100644
--- a/js/seed/README.md
+++ b/js/seed/README.md
@@ -20,10 +20,66 @@ This is an opinionated, minimal starting point for browser-native web apps using
 - No dependencies
 - Encourages functional, declarative code
 
+## How to Extend and Use This Template
+
+This template is designed to be a flexible, opinionated starting point for any browser-native app.
+
+### Key Files to Extend
+- **src/state.js**: Define the app's state shape and any helper functions for cloning or initializing state.
+- **src/update.js**: Add new action/message types and update logic. This is where you handle all state transitions.
+- **src/view.js**: Build your UI as a pure function of state. Add new components or views here.
+- **src/api.js**: Add or replace API calls as needed for your app's data fetching.
+- **src/app.js**: Wire up events, use the generalized `render` function, and add any app-specific logic (e.g., focus management, custom event handling).
+
+### Using the Generalized `render` Function
+The `render` function in `app.js` is designed to be reusable for any app. It takes a config object:
+
+```js
+render({
+  root,                // DOM element to render into
+  state,               // Current app state
+  view,                // View function: (state) => html
+  events: [            // Array of event bindings
+    { selector, event, handler },
+    // ...
+  ],
+  postRender           // Optional: function({ root, state }) for custom logic (e.g., focus)
+});
+```
+
+#### Example: Adding a New Feature
+Suppose you want to add a button that increments a counter:
+
+1. **state.js**: Add `count` to your state.
+2. **update.js**: Handle an `INCREMENT` action.
+3. **view.js**: Add a button and display the count.
+4. **app.js**:
+   - Add an event handler for the button:
+     ```js
+     function handleIncrement() {
+       dispatch({ type: 'INCREMENT' });
+     }
+     ```
+   - Add to the `events` array:
+     ```js
+     events: [
+       { selector: '#increment-btn', event: 'click', handler: handleIncrement },
+       // ...other events
+     ]
+     ```
+
+### Tips
+- Keep all state transitions in `update.js` for predictability.
+- Keep all DOM rendering in `view.js` for clarity.
+- Use the `postRender` hook for accessibility or focus management.
+- Add new features by extending state, update, view, and wiring up events in `app.js`.
+
 ---
 
 Inspired by the [Elm Architecture](https://guide.elm-lang.org/architecture/), but using only browser APIs and ES modules. 
 
+---
+
 ## MIT License
 
 Copyright 2025 eli_oat