Description

Simple React, SolidJS, Svelte, & Vue counter components with state & shared state in Astro.

Overview

Coming from a content-website background, Astro is my preferred framework for creating content-driven sites. I developed this project to boost my understanding of state and framework interoperability within Astro, as well as my understanding of Astro's islands.

The React, SolidJS, Svelte, and Vue components have their own independent state, as well as a shared state between them. I added an AlpineJS counter for fun. Astro allows these components to render, communicate, and work within the same page using stores.

This can be used as a template for anyone curious about how to share state between frameworks in Astro, or anyone incrementally updating their Astro site from one framework to another. I've found it most useful for building websites in Svelte but incorporating the occasional React component.