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.
Linux | Windows | macOS |
---|---|---|
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
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
If you just want to build the application for usage you can now run ./build.vsh
.
dist/
directory will contain the build output.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.
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 .
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.