💬 cursor chat à la Figma for digital co-existing + presence

Related tags

Vue.js p2p yjs vite cursor-chat
Overview

cursor-chat

💬 lightweight (31.8kB) cursor chat à la Figma for digital co-existing + presence

As a warning, this library is for experimental purposes and should not be used in production (but very suitable for personal websites and playful experiments!).

Built on top of yjs and perfect-cursors

For a React version of this library, check out y-presence.

Demo

Cursor Chat Demo

Press / to start chatting and esc to clear your chat bubble!

Usage

Include this fragment in your HTML somewhere to include the base HTML divs, the compiled JavaScript bundle, and the styling.

<div id="cursor-chat-layer">
  <input type="text" id="cursor-chat-box">
</div>
<script src="https://unpkg.com/cursor-chat"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/cursor-chat/dist/style.css"/>
You might also like...

Digital Identifier is a secure, decentralized, anonymous and tampered proof way of maintaining and verifying all essential identity-based documents to create a unique digital identity of a person.

Digital Identifier is a secure, decentralized, anonymous and tampered proof way of maintaining and verifying all essential identity-based documents to create a unique digital identity of a person.

Digital Identifier 🧐 To design and develop a secure, decentralized, anonymous and tampered proof way of maintaining and verifying all essential ident

Dec 17, 2022

[GSoC Project] Rocket.Chat App that connects with Figma

Getting Started Now that you have generated a blank default Rocket.Chat App, what are you supposed to do next? Start developing! Open up your favorite

Dec 12, 2022

Um cantinho dessa org destinado a elaboração de apps/aplicações de Custom Presence.

Um cantinho dessa org destinado a elaboração de apps/aplicações de Custom Presence.

Discord Server Rich Presence - Coders Community Um cantinho dessa org destinado a elaboração de apps/aplicações de Custom Presence. Para executar o no

Dec 12, 2022

Add to your GitHub readme a badge that shows your Discord username and presence (online/idle/do not disturb/offline)!

Discord Profile Markdown badge Add to your GitHub readme a badge that shows your Discord username and presence! Set up Join the Discord server (requir

Dec 30, 2022

Add multiplayer presence (live cursors/avatars) to your react application using yjs and hooks

y-presence Easy way to add presence (live cursors/avatars) to any react application using react hooks. Installation yarn add y-presence # or npm i y-p

Dec 29, 2022

A code that allows you to get custom spotify rich presence

Spotifycord A code that allows you to get custom spotify rich presence! The index.js is the main file. server.js prevents your repl from going to slee

Oct 7, 2022

📗 A simple electron app to connect with Platzi and add a discord rich presence

📗 A simple electron app to connect with Platzi and add a discord rich presence

Platzi - Discord Rich Presence RPC Electron Requirements Nodejs you can download the latest version - here clone the repository like this - git clon

Oct 31, 2022

Add Discord rich presence for Apple Music!

Add Discord rich presence for Apple Music!

Apple Music Presence Connect Apple music with Discord! We all have friends who have Spotify (gross), but it shows what they are listening to in Discor

Jan 1, 2023

Discord Rich Presence made with ♥ by Ahad#3257

Discord Rich Presence made with ♥ by Ahad#3257

Discord-RPC Discord Rich Presence made with ♥ by Ahad#3257 How To Use? It's very simple just follow the steps written below or see tutorial on YouTube

Dec 24, 2022

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop Chat Loop is a highly scalable, low cost and high performant chat application built on AWS and React leveraging GraphQL subscriptions for re

Jun 20, 2022

A group listening chat app that utilizes the spotify api to enable the users to queue, pause, change songs, as well as chat with each other

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Dec 19, 2021

A chat application created using React,js and Chat Engine

⭐️ Chat-App ⭐️ A Chat Application created using React.js and Chat Engine Live Site Getting Started with Create React App This project was bootstrapped

Dec 15, 2022

💬 Real-time chat application prototype that can summarise the entire chat log

💬 Real-time chat application prototype that can summarise the entire chat log

Chat summarizer 📝 Disclaimer! This is a prototype and a fun project that I've been working on and it is not ready for production. It was done in a fe

Jan 22, 2022

Chotu Chat Room is a minimal, distraction-free chat application

Chotu Chat Room is a minimal, distraction-free chat application. We have some predefined channels that anyone can join. No registration/login required.

Sep 19, 2022

Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files.

Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files.

Obsidian Chat View Plugin Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files. Usage Every chat message must be pref

Dec 27, 2022

Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

Omnichannel Live Chat Widget UI Components @microsoft/omnichannel-chat-widget is a React-based UI component library which allows you to build your own

Dec 15, 2022

SpaceChat - a realtime chat app that allows you to chat with your friends in pairs as well as in groups

SpaceChat - a realtime chat app that allows you to chat with your friends in pairs as well as in groups

A socket.io based real time chat app where you can perform one-to-one chats as well as group chats! Built using MERN stack, this project implements all core functionalities like User Authentication, Web Sockets, CRUD Operations, Routing and much more!

Aug 1, 2022

Replaces Youtube Chat with Destiny.gg chat.

Replaces Youtube Chat with Destiny.gg chat.

A lightweight extension that replaces the native Youtube Live chat with an embeded destiny.gg chat. Note: This is in no way affiliated with Destiny.gg

Jul 27, 2022

The Chat'Inn is a simple and minimal realtime chat application whose database is powered by firebase and firestore.

The Chat-in The Chat'Inn is a simple and minimal realtime chat application whose database is powered by firebase and firestore. The frontend part is c

Aug 8, 2022
Comments
  • Chat box is sometimes offset incorrectly

    Chat box is sometimes offset incorrectly

    Should be fixed if you add the following:

      top: 0px;
  left: 0px;

    to #cursor-chat-layer (too lazy to make a PR).

    Example: image

    (My cursor is at the top right of the selected text)

    opened by vedantroy 0
  • Fix cursor deletion on stale

    Fix cursor deletion on stale

    https://github.com/jackyzha0/cursor-chat/blob/6a5b1ff74c5f5deb56299a817f35b7076072c03f/src/main.ts#L93

    should delete from this.replicated_cursors instead

    opened by jackyzha0 0
  • Fix cursor-chat div expanding page size

    Fix cursor-chat div expanding page size

    When initializing all the cursors, some old cursors might have document height much larger than the current size. Either don't render new cursors right away or ignore cursor events outside of document size

    opened by jackyzha0 0
Releases(v0.3.0)

  • v0.3.0(Sep 3, 2022)

    What's new

    • Switched from y-websockets to y-webrtc
    • Added on leave handler for proper cleanup
    • Reduced code complexity

    Full Changelog: https://github.com/jackyzha0/cursor-chat/compare/v0.1.0...v0.3.0

    Source code(tar.gz)
    Source code(zip)

  • v0.1.0(Mar 25, 2022)

Owner
Jacky Zhao
playfully pushing bits and pixels
Jacky Zhao
GitHub https://jzhao.xyz/cursor-chat
A Figma plugin for generating skeleton UI placeholders, specific to Discord's usecases.

Project Scaffold Generator Why? This is an internal tool we use at Discord to generate Discord specific "skeleton/placeholders" for help in designing

Bryan Berger 17 Nov 22, 2022
A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere

@yomo/react-cursor-chat ?? Introduction A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real

YoMo 84 Nov 17, 2022
Vue-cursor-fx - 🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

?? Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a

Luca Iaconelli 56 Aug 18, 2022
Replaces native cursor with custom animated cursor.

Animated Cursor A pure JS library to replace native cursor with a custom animated cursor. Check out the Demo Contents ?? Features ?? Quickstart ?? Opt

Stephen Scaff 7 Jul 18, 2022
This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's cursor functionality.

animatedWebCursors.js This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's

alienmelon 32 Dec 25, 2022
Update your discord activity status with a rich presence from Figma.

Figma Discord Presence Update your discord activity status with a rich presence from Figma. Supports Windows and MacOS Features Shows what you're work

Bryan Berger 93 Jan 2, 2023
🏗️ Figma Plugin for speeding up and ensure consistency in the structure of your Figma projects

??️ Codely Structurer Figma Plugin Figma Plugin for speeding up and ensure consistency in the structure of your Figma projects Stars are welcome ?? ??

CodelyTV 18 Dec 14, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023