Web component JS frameworks quick overview by their syntax and features

Website: https://component-party.dev

🤔 Why?

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

• 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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

SolidJS

• 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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

Ember

• 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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

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
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Fetch data
  • Router link
  • Routing

🤝 Contributing

This site is built with Astro. 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 v14.0.0 or higher, because we use new JavaScript features in our code, such as optional chaining.

Add a framework

1. Fork the project and create a new branch
2. Add the new framework SVG logo in public/framework
3. Install the ESLint plugin associated to the framework
4. In frameworks.mjs, add a new entry with SVG link and ESLint configuration

🧑‍💻 Contributors

This project exists thanks to all the people who contribute. [Contribute].

⚖️ License

MIT. Made with 💖