The StackBlitz Examples page is a map of runnable projects, not just a list of links. Use its table of contents to move from a first state update to filters, reducers, lifecycle behavior, and framework comparisons without installing a local toolchain first. The important part is what you carry between examples: the same FeatureCell™ pipeline logic remains in focus while the UI adapter changes.
What the StackBlitz Examples Page Is For
Open StackBlitz Examples when you want to study a working behavior in context. Each standard example is a live runnable project with its dependencies pre-configured. You can inspect the source, run it, change a value, and see the result without first creating a project or choosing a package configuration.
The collection is intentionally progressive. Getting Started covers Initial State, Replace State, and Reset State. Core Patterns adds Error, HTTP Resource, Hydrate State, Observable, and Promise. Intermediate examples introduce array merges, the Delay Interceptor Pipeline, and the Filter & Reducer Pipeline. Advanced examples include the Built-in Debugger, Framework Comparison, and Tab Sync.
Key takeaway: Choose an example by the behavior you want to understand, then use the framework button that matches the UI you are building.
Finding an Example with the Table of Contents
Start at the table of contents instead of scrolling through every card. The framework section is grouped into Getting Started, Core Patterns, Intermediate, Advanced, and Tutorial. Each group and each example has a fragment link, and each one has a link back to the top of the page. That makes the page useful as a reference while you are moving between a browser tab and an editor.
| Group | Use it to explore |
|---|---|
| Getting Started | Initial, replacement, and reset state flows |
| Core Patterns | Async inputs, hydration, errors, and HTTP Resource |
| Intermediate | Merge behavior, delay, filters, and reducers |
| Advanced | Debugging, framework comparison, and tab synchronization |
| Tutorial | A chapter-by-chapter path from display to Stepwise Pipeline |
For a focused tour, jump to Filter & Reducer Pipeline, then compare it with Tutorial Chapter 7: Filters and Reducers. Chapter 12: State Introspection and Chapter 15: Stepwise Pipeline are useful follow-ups when you want to inspect snapshots or extend the flow.
What Stays the Same Across Frameworks
Select Angular, React, Svelte, or Vue from an example's launch choices. The UI code changes because each framework has its own component and binding model. The FeatureCell contract does not. Inputs still enter the declared pipeline, where Resolve, Merge, Operators, Filters, and Reducers process candidates before the resulting immutable State snapshot is available to the UI.
That separation is the point of the Framework Comparison example. Use it to ask a precise question: is this difference caused by the runtime pipeline, or only by the adapter that renders its output? In most cases, the answer is the latter. Filters and reducers stay part of the shared pipeline; the framework-specific layer subscribes to the result and presents it.
Read across, not just down. Open the same example in two framework tabs and compare the state shape, pipeline configuration, and UI binding separately. This turns the page into a cross-framework learning tool instead of four unrelated demos.
Launching and Modifying a Live Project
Choose a framework, launch the project, and find the smallest file that answers your question. Run the original example first. Then change one input, one filter condition, or one displayed field and run it again. Keeping the first edit narrow makes it easier to see whether you changed pipeline logic or only presentation.
- Open the example from its table-of-contents link.
- Choose Angular, React, Svelte, or Vue.
- Run the unchanged project and identify the visible State snapshot.
- Make one small edit, save, and observe the new result.
- Duplicate the project when you want to try a larger extension.
StackBlitz is especially useful here because the dependency setup is already present. You can spend the first session tracing a behavior rather than resolving local package versions. When an experiment needs files or runtime capabilities that the browser preview cannot provide, follow the page's local-only instructions instead.
Warning: A browser preview is not proof that every runtime example can run in StackBlitz. Read the notice on the example card before treating a missing launch button as an error.
Understanding Specialty Runtime and Local-Only Examples
The Specialty Runtime Examples section is a separate track. Bun, Deno, VanillaJS, Node.js, and TypeScript examples are marked Local-Only Example and do not launch in StackBlitz. That label tells you the example depends on a local runtime, not that the underlying pipeline idea is different.
| Runtime | Local workflow |
|---|---|
| Bun | Use local Bun with bun install and bun start. |
| Deno | Run deno run src/main.ts; there is no install step. |
| VanillaJS | Use local Node.js with npm install and npm start. |
| Node.js | Use npm install and npm start. |
| TypeScript | Use the Node.js example directory, then install and start it locally. |
Tab Sync has a different limitation: StackBlitz instances have unique origins, so BroadcastChannel synchronization cannot be demonstrated in the browser preview. Clone the repository and run the selected Angular, React, Svelte, or Vue example locally when you need to test that behavior.
Extending a Pipeline in the Browser
Once the original project is clear, extend the smallest boundary that answers your question. Keep the pipeline responsible for filtering and reducing data; keep the UI adapter responsible for displaying the immutable snapshot. This framework-agnostic helper illustrates the kind of view derivation you can test after changing a live example's pipeline configuration:
type Character = {
id: number;
name: string;
};
const visibleCharacters = (
state: readonly Character[],
query: string
): Character[] =>
state.filter((character) =>
character.name.toLowerCase().includes(query.toLowerCase())
);
The function is pure: it receives a snapshot and returns a derived collection. In a live project, you can replace the query, add a second condition, or compare the result with the Filter & Reducer Pipeline example. If the same edit behaves consistently in Angular, React, Svelte, and Vue, you have probably changed shared pipeline logic. If only the rendering changes, you are working in the thin UI adapter where you should be.
For the next step, open the StackBlitz Examples page, try the framework comparison, and then move to the tutorial chapter that matches the behavior you want to add.
Top comments (0)