https://github.com/anhsirk0/whatsapp-svelte

WhatsApp mockup using Tailwind, DaisyUI and sveltekit
https://github.com/anhsirk0/whatsapp-svelte

daisyui mockup sveltekit tailwindcss whatsapp

Last synced: 3 days ago
JSON representation

WhatsApp mockup using Tailwind, DaisyUI and sveltekit

• Host: GitHub
• URL: https://github.com/anhsirk0/whatsapp-svelte
• Owner: anhsirk0
• Created: 2022-09-19T17:24:26.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-16T13:19:13.000Z (over 2 years ago)
• Last Synced: 2025-05-07T04:34:01.144Z (about 1 month ago)
• Topics: daisyui, mockup, sveltekit, tailwindcss, whatsapp
• Language: Svelte
• Homepage: https://anhsirk0.codeberg.page/whatsapp-svelte/
• Size: 7.47 MB
• Stars: 19
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# whatsapp-svelte

![main.gif](https://github.com/anhsirk0/whatsapp-svelte/blob/master/screenshot/main.gif)

This is a WhatsApp Mockup window that you can use to create fake welcome/notification messages.

[Live version](https://anhsirk0-whatsapp.netlify.com)

## Usage

Adding/Updating users  

![user.gif](https://github.com/anhsirk0/whatsapp-svelte/blob/master/screenshot/user.gif)

Adding/Updating messages  

![msg.gif](https://github.com/anhsirk0/whatsapp-svelte/blob/master/screenshot/msg.gif)

Use Sidebar to update/delete messages/users  

OR  

There are 2 components `ReceivedMessage` and `SentMessage`  

You can create You message via ``  

Add `first={true}` if it is the first message (it will display a trianglular shape at one corner of the chat bubble)  

## Running the server

Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash

npm run dev

```