Web component JS frameworks quick overview by their syntax and features
Website: https://component-party.dev
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.
Svelte
![](https://camo.githubusercontent.com/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/e0969da60f9c0862877708e7c3737a0525150d7479a10788e23702f52493b38b/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/3254d50339b1d26f9c0325ad1e1fdc1345f5be8929988908158433d716bf0184/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
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.
- 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
This project exists thanks to all the people who contribute. [Contribute].
MIT. Made with ๐