zvelte Svelte Themes

Zvelte

Zling's lightweight feature-complete chat application in Svelte & TypeScript. Supports voice chat, theming, and a user-specified backend API server.

#api-client #chat #mediasoup-client #spa #svelte #webapp #website
Demo Download

Zling Messaging App

What is Zling?

Zling is a guild-channel based messaging application meant for everyone - from a small friend group or gaming community to a large corporate messaging hive. Zling is built on robust and emerging web technologies to remain usable and deployable anywhere you want, with as much control over your data as you want. Controlling bloat and tuning performance is as much a priority as security and privacy.

Zling puts an emphasis on being software before being a service. Anyone can run Zling in the way they want and not have to associate themselves with our branding. We're not here to tell you how you should run your chat platform.

What is Zvelte?

Zvelte is the official web client for the Zling messaging application. You can use Zvelte on any modern browser that supports JavaScript and WebRTC (for voice & video chat).

Zvelte is written in Svelte (duh!), one of the most admired and desired web frameworks of StackOverflow's 2023 developer survey. We chose Svelte because it is lightweight (~6.7kB), performant and great for developer experience.

Zvelte should maintain full API coverage of the Zling API, and remain a first-class application when developing components of Zling. This is one of the main apps that users of Zling interact with.

Feature Overview

  • šŸ—Øļø Responsive & powerful text chat system.

    • Send Text, Images, Videos, GIFs & Audio seamlessly and losslessly
    • Support for math expressions in LaTeX
    • Custom emojis for whatever you want
    • Rich, highlighted code blocks
    • Embeds for your daily driver websites (YouTube, Twitter, GitHub, etc.)

  • šŸŽ§ Robust & low-latency voice chat backed by field-tested mediasoup library.

    • Secure & IP Leak Protected
    • No P2P instability - uses a central server
    • Low CPU usage - no transcoding, only forwarding
    • High quality & configurable bitrate

  • šŸ“š Organize communities with servers, channels, roles and permissions.

    • Familiar design seen in other apps like Discord, Slack & Revolt

  • šŸ”„ It's pretty quick

    • Nearly instant load time compared to competition
    • 95+ Lighthouse score
    • No unnecessary complexity

  • šŸŒ± Bloat free SPA, powered by Vite, Svelte and Bun.

  • šŸ”“ Open-source & user-first design approach

  • šŸ·ļø Software before a service

    Zling is developed by volunteers in their free time. Reach out to us if you'd like to help!

Quickstart

šŸš§ Zling and Zvelte are currently under development, and do not have a stable release out yet. You are free to self-host the Zling API Server and this app yourself.

Star and watch this repository if you want to stay updated!

Set up build environment

We prefer to use Bun as a package manager because it's fast. Linux is recommended for a development and building OS as it simplifies installing a lot of dependencies.

1. Install Bun

See Bun's Installation Guide. You can also use a different package manager like npm or yarn, but Bun is strongly recommended.

# check if it works
$ bun --version
1.0.7
2. Install Packages

This installs some needed JS development libraries. Should take about a second to finish...

$ bun install
Output 
bun install v1.0.7 (b0393fba)
 + @iconify/[email protected]
 + @sveltejs/[email protected]
 + @tsconfig/[email protected]
 + @types/[email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]
 + [email protected]

 168 packages installed [1065.00ms]
3. Build the app...
# Build static files if you're deploying
$ bun run build
Output 
vite v4.5.0 building for production...
āœ“ 303 modules transformed.
dist/index.html                   1.96 kB ā”‚ gzip:  0.91 kB
dist/assets/index-121c99f0.css   31.38 kB ā”‚ gzip:  6.47 kB  # main css file
dist/assets/index-7ef777b8.js   215.70 kB ā”‚ gzip: 66.69 kB  # app including all icons & some css
dist/assets/index-a2f0e58a.js   281.96 kB ā”‚ gzip: 49.23 kB  # loaded during voice chat only
āœ“ built in 2.69s

# āœ… Your built files are in the dist/ folder ready to host.

# Open the built app in a browser (with HTTPS!)
$ bun run start
Output 
  āžœ  Local:   https://localhost:2000/
  āžœ  Network: use --host to expose
  āžœ  press h to show help
4. ...or develop it!
# Open a hot-reloaded HMR server in your browser with HTTPS.
$ bun run dev
Output 
  VITE v4.5.0  ready in 325 ms

  āžœ  Local:   https://localhost:2000/
  āžœ  Network: use --host to expose
  āžœ  press h to show help

Happy hacking!

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes