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
![100% progress](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
- Context
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Render app
- Fetch data
- Router link
- Routing
React
![100% progress](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
- Context
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Render app
- Fetch data
- Router link
- Routing
Vue 3
![96% progress](https://camo.githubusercontent.com/ec19e04b233d941a39105b2f397751c09f86f181d8e873dca242772f82c1687f/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3936)
- 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
- Router link
- Routing
SolidJS
![92% progress](https://camo.githubusercontent.com/1fc28e89ca709d72d8e66b9ac31e8942697793f493df469f469e8b7d0476fcbf/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3932)
- 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
- Router link
- Routing
Qwik
![92% progress](https://camo.githubusercontent.com/1fc28e89ca709d72d8e66b9ac31e8942697793f493df469f469e8b7d0476fcbf/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3932)
- 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
- Router link
- Routing
Angular
![92% progress](https://camo.githubusercontent.com/1fc28e89ca709d72d8e66b9ac31e8942697793f493df469f469e8b7d0476fcbf/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3932)
- 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
- Router link
- Routing
Lit
![96% progress](https://camo.githubusercontent.com/ec19e04b233d941a39105b2f397751c09f86f181d8e873dca242772f82c1687f/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3936)
- 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
- Router link
- Routing
Vue 2
![100% progress](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
- Context
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Render app
- Fetch data
- Router link
- Routing
Ember
![96% progress](https://camo.githubusercontent.com/ec19e04b233d941a39105b2f397751c09f86f181d8e873dca242772f82c1687f/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3936)
- 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
- Router link
- Routing
Alpine
![96% progress](https://camo.githubusercontent.com/ec19e04b233d941a39105b2f397751c09f86f181d8e873dca242772f82c1687f/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3936)
- 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
- Router link
- Routing
Aurelia 1
![92% progress](https://camo.githubusercontent.com/1fc28e89ca709d72d8e66b9ac31e8942697793f493df469f469e8b7d0476fcbf/68747470733a2f2f75732d63656e7472616c312d70726f67726573732d6d61726b646f776e2e636c6f756466756e6374696f6e732e6e65742f70726f67726573732f3932)
- 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
- Router link
- Routing
Marko
![100% progress](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
- Context
- Form input
- Input text
- Checkbox
- Radio
- Select
- Webapp features
- Render app
- Fetch data
- Router link
- Routing
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 v16.0.0
or higher.
- 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
frameworks.mjs
, add a new entry with SVG link and ESLint configuration - If the framework needs a language syntax highlight, add it to the call to
getHighlighter
βslangs
argument inbuild/lib/generateContent.js
- To make a playground link:
- Add a
create${FRAMEWORK}Playground.js
file inbuild/lib/playground
. - That file should export a function that returns an object with a
fromContentByFilename
method that accepts an object of filepath keys and file content values, then returns an absolute URL to a frameworkβs online REPL with those files loaded. - Register its export in
build/lib/playground/index.js
- Add a
This project exists thanks to all the people who contribute. [Contribute].
MIT. Made with π