Home

Awesome

Emoji Mart Desktop App

An emoji picker desktop application - it serves as an example of using webview with a modern web framework. Nonetheless, it is a real and capable application, and nothing should stop you from simply using it.

Contents

Application / Usage

<table align="center"> <tr> <th>Linux</th> <th>Windows</th> <th>macOS</th> </tr> <tr align="center"> <td> <img width="400" src="https://github.com/ttytm/emoji-mart-desktop/assets/34311583/bce465bb-9d72-4c96-af94-e3a758657bc3"> </td> <td> <img width="340" src="https://github.com/ttytm/emoji-mart-desktop/assets/34311583/2a7b86d5-9f85-4a8f-afc6-2bbb7f4a6ffe"> </td> <td> <img width="450" src="https://github.com/ttytm/emoji-mart-desktop/assets/34311583/7c75c993-5445-4d1e-9090-a6d8de02c90e"> </td> </tr> <tr align="center"> <td> <img width="400" src="https://github.com/ttytm/emoji-mart-desktop/assets/34311583/b01099d8-6883-4c4b-9346-975bf675b0a4"> </td> <td> <img width="340" src="https://github.com/ttytm/emoji-mart-desktop/assets/34311583/dbc3eba3-cd42-4d3a-831a-5ce431a519e4"> </td> <td> <img width="450" src="https://github.com/ttytm/emoji-mart-desktop/assets/34311583/c92964e0-0200-4838-920f-bb9c905ea355"> </td> </table>

Installation

Config

Config values that are set via the in-app menu are saved for the next run.

# Lin: ~/.config/emoji-mart/
# Mac: ~/Library/Application Support/emoji-mart/
# Win: %USERPROFILE%/AppData/Roaming/emoji-mart/

# Default values
audio = true # enable audio hint on emoji-selection
frequent = true # display frequently used emojis

Webview Example / Building and Development

Preparation

# Clone the repisitory
git clone https://github.com/ttytm/emoji-mart-desktop.git
cd emoji-mart-desktop
# Install dependencies
v install --once

# If you haven't used it before, prepare the webview library.
# Linux/macOS
~/.vmodules/webview/build.vsh
# Windows PowerShell
v $HOME/.vmodules/webview/build.vsh

Building

If you just want to build the application for usage you can now run ./build.vsh.

Building and Running in a Development Context

Since we use web technologies for the UI, a good part of the frontend-work can likely be done via the browser, just like working on a regular web application. However, there comes a point where we want to connect our V program and the UI.

Example 1 - run a vite dev server and connect to it

When connecting to a vite dev server features like hot reloading are preserved. Just like in the browser most changes on the UI will be immediately reflected in the application window.

Example 2 - serve the prebuilt site

This is the regular build approach and how our final app is working.

<br>

I hope this quick start guide and the examples in the repositories source code help on the way to release your own UI project.

Related Projects

Credits