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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/eae925ecb92dd5eba20686273edaa2433c1c9b4adedf53af833a26d083893f68/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f313030)
- 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
![](https://camo.githubusercontent.com/a5731eb5599093bed4b206694b8c98c3508639e8ce7424e45f4821338b6a61a5/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3332)
- 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
- Fork the project and create a new branch
- Add the new framework SVG logo in
public/framework
- Install the ESLint plugin associated to the framework
- In
src/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 ?