https://github.com/emmyjs/emmy-dom
A tiny simple way for building web user interfaces
https://github.com/emmyjs/emmy-dom
custom-elements dom-manipulation emmy-dom emmy-js front-end functional-web-components reactive web-components
Last synced: 4 months ago
JSON representation
A tiny simple way for building web user interfaces
- Host: GitHub
- URL: https://github.com/emmyjs/emmy-dom
- Owner: emmyjs
- License: mit
- Created: 2023-10-10T17:24:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T13:09:35.000Z (over 1 year ago)
- Last Synced: 2025-10-26T10:42:59.997Z (8 months ago)
- Topics: custom-elements, dom-manipulation, emmy-dom, emmy-js, front-end, functional-web-components, reactive, web-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/emmy-dom
- Size: 1.86 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Emmy.js
A tiny simple way for building web user interfaces using functional Web Components
## Why Emmy.js?
Emmy.js is a tiny simple way for building web user interfaces using functional Web Components. It is based on the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) standard.
It is specially designed for building web applications with server-side frameworks like Ruby on Rails, Django, Laravel, etc. [More info](https://emmyjs.pages.dev/getting-started)
> [!NOTE]
> Emmy.js is still in an experimental phase, so it is not recommended to use it in production, but you can try it out and give us your feedback.
## `npx create-emmy`
[create-emmy](https://www.npmjs.com/package/create-emmy) is a command line tool that allows you to create a new Emmy.js project. [More info](https://github.com/emmyjs/create-emmy#readme)
> [!TIP]
> create-emmy 0.2.2 is now here! Try prerendering in a Vanilla Emmy app now!
> In order to create a new Emmy.js project, you can run the following command and follow the instructions:
> `npx create-emmy`
## Frameworks Guides
For your specific framework, see the following guides:
1. [Ruby on Rails](https://emmyjs.pages.dev/documentation/rails)
2. [Vite](https://emmyjs.pages.dev/documentation/vite)
## Quick Start
### Installation
#### Using CDN
Just add the following script tag to your HTML file:
```html
```
This option is recommended for quick testing, but it will not allow you to use the pre-rendering feature.
#### Using npm
First install the package:
```bash
npm install emmy-dom
```
### Usage
Then, use the `emmy-dom` package in your JavaScript files:
```javascript
import { load, html } from 'emmy-dom'
const myComponent = () => html`
Hello World!
`
load(myComponent, 'MyComponent')
```
## Documentation
You can find the documentation [here](https://emmyjs.pages.dev/documentation).
[Tutorial](https://www.youtube.com/watch?v=rOxAJ9c068c)
## Contributing
We are open to contributions. If you want to contribute, please read the [contributing guide](CONTRIBUTING.md).
## License
Emmy.js is licensed under the [MIT License](LICENSE).
## Features
1. [Class Components](https://emmyjs.pages.dev/documentation)
2. [Functional Components](https://emmyjs.pages.dev/documentation)
3. [Page Components](https://emmyjs.pages.dev/documentation)
4. [Emmy Hooks](https://emmyjs.pages.dev/documentation)
5. [Emmy Router](https://emmyjs.pages.dev/documentation)
6. [Pre-rendering](https://emmyjs.pages.dev/documentation)
8. [Compatibility with server-side frameworks](https://emmyjs.pages.dev/documentation)