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
  • Installation
  • Config
• Webview Example / Building and Development
  • Preparation
  • Building
  • Building and Running in a Development Context
• Credits

Application / Usage

Installation

• The projects GitHub releases page provides prebuilt binaries for GNU/Linux, Windows and macOS.

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

• V - Installing V from source

• npm - npm/cli

• emoji-mart-desktop

# 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.

• The dist/ directory will contain the build output.

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.

• Run the app with the dev flag - this runs a vite dev server and connects to its localhost instance

  # Install the node modules beforehand if it's the first run.
  npm i --prefix ui/
  

  v -d dev run .
  

  # On Windows, it is recommended to use `gcc` for compilation.
  v -cc gcc -d dev run .
  

Example 2 - serve the prebuilt site

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

• Build the UI - this uses SvelteKit as a static site generator

  # Install the node modules beforehand if it's the first run.
  npm i --prefix ui/
  

  npm run build --prefix ui/
  

• Run the app - this uses vweb to serve the previously build files locally and connect to it via webview

  v run .
  

  # Windows
  v -cc gcc run .
  

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

• webview - V module that allows to create a system level application, while using modern web technologies for the UI.
• LVbag - CLI tool to generate embedded file lists.

Credits

• The app uses on the great work of missive/emoji-mart
• The icon used for the AppImage comes from microsoft/fluentui-emoji