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 standard. It is specially designed for building web applications with server-side frameworks like Ruby on Rails, Django, Laravel, etc. More info

---

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 is a command line tool that allows you to create a new Emmy.js project. More info

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
2. Vite

Quick Start

Installation

Using CDN

Just add the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/emmy-dom@latest" type="module"></script>

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:

npm install emmy-dom

Usage

Then, use the emmy-dom package in your JavaScript files:

import { load, html } from 'emmy-dom'

const myComponent = () => html`
  <div>Hello World!</div>
`

load(myComponent, 'MyComponent')

Documentation

You can find the documentation here.

Tutorial

Contributing

We are open to contributions. If you want to contribute, please read the contributing guide.

License

Emmy.js is licensed under the MIT License.

Features

1. Class Components
2. Functional Components
3. Page Components
4. Emmy Hooks
5. Emmy Router
6. Pre-rendering
7. Compatibility with server-side frameworks