Emoji Mart Desktop App

May 26, 2024 ยท View on GitHub

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

Linux Windows macOS

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.

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

  • 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