Many JS developers don't have a good overview of every existing JS framework with their own syntax and features.
How do we solve this ? Developers love having framework overview by examples. It's a quick introduction before going deeper.
🔥 Progression
Svelte 5
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
React
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Vue 3
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Angular Renaissance
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Angular
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Lit
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Ember Polaris
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Ember Octane
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Solid.js
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Svelte 4
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Vue 2
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Alpine
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Mithril
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Aurelia 2
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Qwik
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Marko
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Aurelia 1
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
Ripple
Reactivity
Declare state
Update state
Computed state
Templating
Minimal template
Styling
Loop
Event click
Dom ref
Conditional
Lifecycle
On mount
On unmount
Component composition
Props
Emit to parent
Slot
Slot fallback
Context
Form input
Input text
Checkbox
Radio
Select
Webapp features
Render app
Fetch data
🤝 Contributing
This site is built with Vite and Svelte. Site content is written in Markdown format located in content. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
For local development, pnpm is preferred as package manager:
pnpm i
pnpm run dev
This project requires Node.js to be v22.18.0 or higher.
Bulk formatting commits are listed in .git-blame-ignore-revs so they don't clutter git blame. Enable it locally with:
Clarity is better than optimization for Component Party
In Component Party, we prioritize clarity over optimization as our core educational focus. We aim to simplify complex overviews of different JS frameworks for easy understanding, rather than presenting over-optimized solutions.
We believe that deep understanding should precede optimization, enabling learners to master the frameworks' use and discover optimization techniques independently. This approach aligns with our commitment to fostering accessible and effective learning in the field of web component JavaScript frameworks.
Add a new framework
Fork the project and create a new branch
Add the new framework SVG logo in static/framework
In frameworks.ts, add a new entry with SVG link
If the framework needs a language syntax highlight, add it to the call to getHighlighter’s langs argument in build/lib/highlighter.ts
To make a playground link in build/lib/playgroundUrlByFramework.ts.
🧑💻 Contributors
This project exists thanks to all the people who contribute. Contribute
Svelte 5
React
Vue 3
Angular Renaissance
Angular
Lit
Ember Polaris
Solid.js
Alpine
Mithril
Aurelia 2
Qwik
Marko
Ripple
