Design - howinfo/howinfo GitHub Wiki

Sht

Q: Does Apple new Liquid Glass design affect accessibility?

A: (by Google Gemini)

Apple's new "Liquid Glass" design, introduced with iOS 26 and other operating systems, aims to create a more dynamic, translucent, and expressive user interface. While visually striking, it does have potential implications for accessibility, particularly for users with visual impairments.

Here's a breakdown of how it affects accessibility:

  • Increased Transparency and Legibility: The core of Liquid Glass is its transparent, glassy look for icons, menus, and windows. While this can create a sense of depth and focus on content, some users, especially those with visual impairments, might find it difficult to read text or view certain elements when the background is busy or has low contrast. The transparency can make content clarity suffer.

  • Accessibility Features as a Solution: Apple is aware of these potential issues and has emphasized that Liquid Glass works with existing accessibility features. Specifically, the "Reduce Transparency" setting (found in Settings > Accessibility > Display & Text Size on iOS/iPadOS, and System Settings > Accessibility > Display on macOS) is crucial. Toggling this on replaces the transparent effect with a solid background, significantly boosting contrast and visibility. This setting existed before Liquid Glass and was designed to help users with similar vision issues.

  • Dynamic Adaptation: Apple states that Liquid Glass is designed to be highly adaptable. It responds automatically to user preferences, simplifying transitions under "Reduce Motion," adding opacity when "Reduce Transparency" is enabled, and increasing separation when "Increase Contrast" is on. It also dynamically adjusts shadow opacity, blur density, and brightness based on the underlying content.

  • Developer Guidelines: Apple's developer documentation advises developers to test their interfaces with accessibility settings. It emphasizes that standard components from system frameworks will adapt automatically, but custom elements and animations need to provide a good fallback experience when these settings are on. Developers are also cautioned against overusing Liquid Glass effects to avoid distracting from content.

  • Broader Accessibility Enhancements: Alongside the Liquid Glass design, Apple is introducing a range of new accessibility features in its upcoming OS updates. These include:

    • Magnifier for Mac: A new vision tool that connects to a user's camera to zoom in on surroundings.
    • Accessibility Reader: A system-wide reading mode to make text easier to read for users with various disabilities, offering extensive options for font, color, spacing, and Spoken Content.
    • Braille Access: An all-new experience that turns Apple devices into full-featured braille note takers.
    • Live Captions on Apple Watch: Real-time transcriptions for users who are deaf or hard of hearing.

In conclusion, while the aesthetic of Apple's Liquid Glass design might present challenges for some users with visual impairments due to its transparency, Apple has built in mechanisms, particularly the "Reduce Transparency" setting, to mitigate these issues. Furthermore, the company continues to introduce a broader suite of accessibility features to enhance usability for all users.

Gurus of 90s Web Design: Zeldman, Siegel, Nielsen

UX Debt: The Hidden Cost of Shipping Fast

The Uline print catalog is impeccably designed

Arcol simplifies building design with browser-based modeling

Magic Ink: Information Software and the Graphical Interface

Design of 37signals: DHH and Jason Fried

  • UI, AI, and new SaaS models at 37signals with Jason Fried
    • https://www.youtube.com/watch?v=W11R97qUzb4
    • Prefers SaaS models that pays the bills. Once line of products too difficult, one command to install still too complex for users.
    • Working on future products where combined web UI and web CLI
  • The problem isn't phones. It's apps
    • https://world.hey.com/horses/the-problem-isn-t-phones-it-s-apps-c978ca26
    • https://news.ycombinator.com/item?id=44122140
    • Notes and thoughs about that article above, by xet7:
      • Is the problem "too many apps" ?
        • Does this mean SuperApps, like at China?
      • Game Consoles are not popular, they're going to Web Apps
      • "AI is a general-purpose tool intended to erode more precise tools' functionality."
        • Is this back to MS-DOS text input only?
        • Kanban is general purpose tool
      • Cooking app Mela
        • People bought it, at age people do not usually buy
        • Gorgeous, useful, new functionality others do not have
        • Clever computing tricks with thoughful human-first design
      • Makes things easy
      • HEY Email
      • Arc browser: Needs better grouping interface
      • Kagi: Better search engine https://kagi.com
      • Solution:
        • Mimimize it
        • Don't make me think
        • Make it easy
        • Unique experiences

Comments about below new UI design like M3, by xet7

  • Is it selected color affecting all of UI, like originally designed at Sailfish OS ? https://sailfishos.org
    • Google's M3 looks like that
  • Does motion animation graphics make accessibility worse, creating sea sickness etc?
  • Larger buttons etc UI elements, clearer hierarchy of UI elements
  • Does this mean black and white images, using some selected color only, not showing full color image?
  • Or is this like ugly color designs, with big cartoon characters style?

New Design like M3: The UI future is colourful and dimensional

iOS

Google

Samsung

  • OneUI 7 at Galaxy S20+

Q: What component system does Microsoft use to embed chat, Excel etc to teams?

A: Microsoft employs a multifaceted approach rather than a single component system to embed features like chat, Excel, and other collaborative experiences into Microsoft Teams. Several key technologies and frameworks work in concert to enable this:

  1. Fluid Framework: This is a foundational technology for creating highly interactive and real-time collaborative experiences. Fluid components are live, shareable pieces of content (like lists, tables, or even parts of applications) that can be embedded across Microsoft 365 apps, including Teams, Outlook, and Whiteboard. Microsoft Loop components are a prominent example built on the Fluid Framework, allowing users to co-edit content seamlessly within Teams chats and channels.

  2. Live Share SDK: Built on top of the Fluid Framework, the Live Share SDK is specifically designed to transform applications into collaborative multi-user experiences within Teams meetings. It enables developers to synchronize application state, media (co-watching videos, co-listening to audio), and even add shared inking or cursor experiences with minimal backend code. This is crucial for embedding interactive tools directly into the meeting stage.

  3. Microsoft Graph API: This is the gateway to data and intelligence in Microsoft 365. It allows developers to access and integrate Microsoft 365 services, including Teams chat, channels, files (like Excel spreadsheets stored in SharePoint or OneDrive), user information, and calendar data. Embedding chat functionality or displaying Excel data often involves using Microsoft Graph APIs to fetch, display, and interact with this information.

  4. Teams JavaScript client library (TeamsJS SDK): This SDK is essential for any application that runs within the Microsoft Teams client. It provides the necessary APIs for an embedded application (often a web app running in a tab) to interact with the Teams environment, such as accessing context (like the current channel or user), enabling single sign-on (SSO), and invoking Teams-specific functionalities like dialogs or task modules.

  5. Azure Communication Services (ACS): For more custom communication scenarios, ACS can be integrated. It provides APIs for voice, video, chat, and SMS, which can be used to build custom communication experiences that can interoperate with or be embedded within Teams. For instance, a custom application might use ACS for its chat backend while integrating with Teams users and channels.

  6. SharePoint Framework (SPFx): SPFx is a popular development model for building client-side web parts and extensions that can be hosted in SharePoint and also seamlessly exposed as tabs or personal apps within Microsoft Teams. This allows developers to build components that can leverage SharePoint's content management and data storage capabilities while providing a user interface within Teams. Embedding an Excel-like experience or a custom data visualization could be done using SPFx.

  7. Adaptive Cards: While not a full component system in the same way as Fluid or SPFx, Adaptive Cards play a vital role in presenting rich, interactive snippets of UI within Teams chats and channels. They are an open card exchange format enabling developers to exchange UI content in a common and consistent way. Bots and connectors often use Adaptive Cards to display information and gather input from users.

  8. Tabs, Bots, and Message Extensions: These are the core extensibility points in Microsoft Teams.

    • Tabs are essentially web pages embedded within Teams channels, group chats, or personal scopes. This is a common way to embed larger applications or services, including Excel Online or custom dashboards.
    • Bots allow for conversational interactions.
    • Message extensions enable users to interact with external services directly from the compose box or from messages.

How Excel is typically embedded:

  • As a Tab: Users can add an Excel file (stored in SharePoint or OneDrive) directly as a tab in a Teams channel or chat. This embeds the Excel for the web experience.
  • Via Fluid Components/Loop: Portions of Excel data or simple tables can be represented as Fluid components for real-time co-editing within a chat.
  • Through Microsoft Graph: Custom applications can use Microsoft Graph to read and write Excel data, presenting it within a custom UI embedded in Teams.

In summary, Microsoft's strategy for embedding features in Teams relies on a rich ecosystem of SDKs, APIs, and frameworks that cater to different needs, from real-time collaborative components (Fluid, Live Share) to data access (Microsoft Graph) and UI integration (TeamsJS, SPFx, Adaptive Cards).

Q: How Trello integrates with Teams?

A:

Trello and Microsoft Teams: A Powerful Integration for Seamless Collaboration

Trello and Microsoft Teams, two popular collaboration tools, can be seamlessly integrated to streamline workflows and enhance team productivity. This integration allows users to manage their Trello boards and cards directly within the Microsoft Teams environment, eliminating the need to switch between applications and fostering a more unified workspace.

Key Features and Benefits of the Integration

The integration of Trello with Microsoft Teams offers a range of features designed to bring your project management directly into your communication hub:

  • Trello Boards as Teams Tabs: Embed your Trello boards directly as tabs within your Teams channels. This provides a centralized and always-visible location for your team to track project progress, view task lists, and access card details without leaving Teams.

  • Create and Manage Trello Cards in Teams: You can create new Trello cards directly from messages in your Teams channels. This is particularly useful for turning conversations and action items into trackable tasks on your Trello board. Furthermore, you can edit existing cards, move them between lists, set due dates, and add members directly from the Teams interface.

  • Actionable Trello Notifications: Receive notifications from Trello directly in your Teams channels or in a personal chat with the Trello bot. This keeps the entire team updated on key activities such as new card creations, comments, and upcoming deadlines, ensuring everyone stays in the loop.

  • Search and Share Trello Cards: Easily search for specific Trello cards using keywords and share them in your Teams conversations. This facilitates quick reference to tasks and discussions, providing context and clarity to your team's communication.

  • The Trello Personal App: Beyond channel-specific integrations, the Trello personal app in Teams provides a dedicated space to view all of your assigned cards and boards in one place, offering a personalized overview of your workload.

  • Enhanced Automation with Power-Ups and Connectors: For more advanced workflows, you can leverage Trello Power-Ups and third-party integration platforms like Zapier or Pabbly Connect. This allows you to create custom automations, such as automatically creating a Trello card when a specific keyword is mentioned in a Teams channel or sending a detailed notification to a specific channel when a card is moved to a "Done" list.

Setting Up the Trello Integration in Microsoft Teams

Integrating Trello with Microsoft Teams is a straightforward process:

  1. Install the Trello App: Navigate to the "Apps" section in your Microsoft Teams client and search for "Trello." Click on the Trello app and add it to your desired team or as a personal app.
  2. Add the Trello Tab to a Channel: In the channel where you want to add a Trello board, click the "+" icon to add a new tab. Select "Trello" from the list of available apps.
  3. Connect Your Trello Account: You will be prompted to log in to your Trello account and authorize the integration.
  4. Select a Board: Choose the Trello board you wish to display in the tab.
  5. Configure Notifications: You can configure the Trello connector to receive specific notifications within a channel. This allows you to customize which Trello activities trigger a notification in Teams.

By bringing the visual and intuitive project management capabilities of Trello into the collaborative communication environment of Microsoft Teams, this integration empowers teams to stay organized, focused, and productive.

Q: What companies are using Fluid Framework?

Microsoft and a Growing Number of Companies Embracing Fluid Framework for Collaborative Experiences

Microsoft stands as the most prominent company utilizing its own Fluid Framework, integrating it across its suite of products to power real-time collaboration. However, the open-source nature of the framework is fostering a growing ecosystem of other companies adopting it to build seamless, shared experiences into their own applications.

Microsoft's extensive use of Fluid Framework is evident in key applications within its Microsoft 365 ecosystem. This includes:

  • Microsoft Teams: Fluid components in Teams chats allow users to create and edit lists, tables, and notes in real-time, directly within the conversation flow. This eliminates the need to switch between different applications for simple collaborative tasks.
  • Office.com and Outlook: The framework powers collaborative features within web versions of Office applications and is being integrated into Outlook for more dynamic email and calendaring experiences.
  • Whiteboard and Loop: Microsoft's Whiteboard application and the newer Microsoft Loop, a dedicated collaborative workspace, are built upon the core principles of the Fluid Framework, enabling freeform, real-time co-creation.

Beyond Microsoft's internal adoption, several other companies have publicly announced their use of or partnership with the Fluid Framework team. One notable example is Mural, a popular online visual collaboration platform. By leveraging Fluid Framework, Mural aims to enhance its real-time capabilities and provide a more seamless experience for its users engaged in virtual whiteboarding and brainstorming sessions.

Another key partner is Infragistics, a provider of user interface (UI) and user experience (UX) tools. They have collaborated with Microsoft to create a Fluid-powered version of their design tool, Indigo.Design. This integration allows for real-time co-designing and prototyping, enabling multiple users to work on the same design file simultaneously.

While the list of publicly announced adopters is still growing, the open-source availability of the Fluid Framework on GitHub encourages experimentation and adoption by a wide range of developers and companies. As the technology matures, it is anticipated that more organizations will leverage its capabilities to build the next generation of collaborative applications.

The Fluid Framework: A Growing Ecosystem of Collaborative Applications

The Fluid Framework, a powerful open-source platform for building real-time collaborative applications, is steadily gaining traction across the tech industry. While still a relatively new technology, its ability to enable seamless, low-latency co-authoring experiences has led to its adoption by a range of companies, from tech giants to specialized industry leaders.

Microsoft, as the originator of the framework, is naturally its most prominent user. The company is deeply integrating Fluid Framework into its own suite of products to power its collaborative features. Key examples include:

  • Microsoft Loop: This application is fundamentally built on the Fluid Framework, offering a flexible canvas with portable components that stay in sync across different applications.
  • Microsoft Teams: Fluid components are being integrated into Teams chats and meetings, allowing for real-time collaboration on lists, tables, and notes without leaving the conversation.
  • Microsoft Whiteboard: The digital canvas application leverages Fluid to enable simultaneous drawing and ideation for all participants.
  • Outlook: Fluid components are being incorporated into emails, transforming static messages into dynamic, collaborative documents.
  • Office.com: The web-based versions of Office applications are increasingly utilizing Fluid for their co-authoring capabilities.

Beyond Microsoft's own ecosystem, the open-source nature of the Fluid Framework has encouraged its adoption by other innovative companies. Two of the most frequently cited partners are:

  • Hexagon: A global leader in digital reality solutions, Hexagon is using the Fluid Framework to build collaborative features into its software for industries like manufacturing, infrastructure, and public safety. This allows for real-time data sharing and interaction on complex 2D and 3D models.

  • Autodesk: A major player in design and engineering software, Autodesk is leveraging the Fluid Framework to enhance collaboration within its applications. This enables multiple users to work together on intricate designs and models in real-time, improving efficiency and communication in the design process.

The release of Fluid Framework 2.0 is expected to further accelerate its adoption by making it even easier for developers to build and integrate collaborative experiences into their applications. As the framework matures and the developer community grows, it is anticipated that a wider and more diverse range of companies will begin to implement this powerful technology to foster more dynamic and interactive user experiences.

Q: Alternatives to Fluid Framework to implement realtime updates. Which one uses smallest amount of clientside code?

Fluid Framework excels at real-time collaboration by providing high-level distributed data structures (DDSes) that abstract away much of the complexity of state synchronization. This generally leads to less client-side code for managing the shared state itself.

However, "real-time updates" is a broad category, and the "smallest amount of client-side code" depends heavily on the nature of those updates and the overall architectural approach. Here's a look at alternatives and how they compare in terms of client-side code:

Alternatives to Fluid Framework for Real-time Updates

The alternatives can generally be categorized based on their underlying approach to real-time communication and data synchronization:

  1. Low-Level Real-time Communication (WebSockets, WebRTC):

    • Description: These are the foundational technologies for real-time communication on the web.
      • WebSockets: Provide a persistent, bidirectional communication channel between a client and a server.
      • WebRTC: Enables peer-to-peer real-time communication, often used for video, audio, and data streaming.
    • Client-side Code: This approach typically requires the most client-side code. You'll need to:
      • Manage WebSocket connections (opening, closing, error handling).
      • Implement message parsing and serialization/deserialization.
      • Manually handle state updates on the client based on received messages.
      • Manage concurrency and conflict resolution if multiple clients are modifying shared data (e.g., using Operational Transformation (OT) or Conflict-Free Replicated Data Types (CRDTs) - which Fluid Framework heavily leverages internally).
    • Pros: Maximum flexibility and control, can be highly optimized for specific use cases.
    • Cons: High development effort, prone to errors if not handled carefully, requires significant boilerplate for complex collaboration.

  2. Real-time Messaging/Pub/Sub Platforms:

    • Examples: Socket.IO, Pusher, Ably, PubNub, Firebase Realtime Database.
    • Description: These services abstract away raw WebSockets and provide higher-level APIs for real-time messaging, often using a publish-subscribe model. You can "subscribe" to channels or paths and receive updates when data changes.
    • Client-side Code: Less than raw WebSockets, but still requires significant client-side logic:
      • You connect to the service and subscribe to relevant channels/paths.
      • When a message is received, your client-side code must interpret the message and apply the changes to the local UI state.
      • For collaborative editing, you still need to devise your own strategy for optimistic updates, conflict resolution, and ensuring data consistency (e.g., by sending granular operation-based updates).
    • Pros: Easier to set up than raw WebSockets, reliable message delivery, often include features like presence and authentication.
    • Cons: Still requires custom logic for complex state synchronization and conflict resolution, can become complex for highly interactive collaborative experiences.

  3. Real-time State Synchronization Libraries/Frameworks (CRDTs/OT-based):

    • Examples: Yjs, Automerge, Liveblocks, ShareDB.
    • Description: These are closer to Fluid Framework's approach. They provide data structures (often CRDTs or OT-based) that automatically handle merging and synchronization of changes across clients. They typically require a backend (either self-hosted or a managed service like Liveblocks) to broadcast changes.
    • Client-side Code:
      • Yjs/Automerge (libraries): These libraries are very powerful for managing the collaborative data model. You define your data using their specific types (e.g., Y.Text, Y.Map) and interact with them like regular data. The libraries handle the diffing, merging, and syncing. However, you still need to connect them to a real-time transport (like WebSockets) and potentially set up your own server to relay the changes. The client-side code for integrating these data structures into your UI (e.g., updating a React component when a Y.Text changes) is up to you.
      • Liveblocks (managed service + SDK): Liveblocks provides a full solution, including a managed backend and client-side SDKs. It offers APIs for presence, live cursors, and shared state, abstracting away much of the underlying complexity of CRDTs. This significantly reduces the client-side code needed for common collaborative features.
      • ShareDB: An Operational Transformation (OT) library for real-time collaborative editing. It provides a robust data model and synchronization mechanism but requires a Node.js backend.
    • Pros: Handles complex synchronization logic (conflict resolution, merging) automatically, enables true multi-user real-time collaboration.
    • Cons: Still requires some understanding of collaborative data models, often needs a dedicated backend service, might have a steeper learning curve than simple pub/sub for basic updates.

  4. Backend-as-a-Service (BaaS) with Real-time Capabilities:

    • Examples: Firebase Realtime Database, Supabase (with Realtime), AWS AppSync (with GraphQL subscriptions).
    • Description: These services offer a complete backend solution with built-in real-time capabilities. You define your data schema (or use a schemaless database), and updates to the data are automatically pushed to subscribed clients.
    • Client-side Code: This often requires the smallest amount of client-side code for basic real-time updates:
      • You typically interact with a simple SDK (e.g., firebase.database().ref('path').on('value', callback)).
      • The BaaS handles persistence, synchronization, and often authentication/authorization.
      • For simple data updates (like a shared counter or a chat message list), you just listen for changes and update your UI.
      • For complex collaborative editing (like a rich text editor), you might still need to integrate with a CRDT/OT library on top of the BaaS or implement custom logic, but for many use cases, the out-of-the-box reactivity is sufficient.
    • Pros: Extremely fast to prototype, minimal backend setup, scalable (managed service), often includes authentication and other backend features.
    • Cons: Vendor lock-in, less control over the underlying infrastructure, can become expensive at scale, may not be suitable for highly granular, high-frequency collaborative editing without additional tooling.

Which One Uses the Smallest Amount of Client-Side Code?

For the absolute smallest amount of client-side code for general real-time updates, Backend-as-a-Service (BaaS) platforms like Firebase Realtime Database or Supabase Realtime often win.

  • You typically just need to initialize their SDK and then use simple on() or subscribe() methods to listen for data changes. The service handles all the heavy lifting of persistent connections, data diffing, and pushing updates.

However, for complex collaborative editing (like a shared document editor where multiple users are typing simultaneously), Fluid Framework or a dedicated CRDT/OT library like Yjs/Automerge (especially with a managed service like Liveblocks) will actually result in less client-side code for the specific problem of state synchronization and conflict resolution. While a BaaS can push raw data updates, it doesn't automatically handle the intricate merging logic required for rich collaborative experiences without significant custom client-side implementation.

Fluid Framework's strength lies in its opinionated approach to collaborative data structures (DDSes). This means you spend less time writing client-side code to manage conflict resolution and synchronization for complex, shared data types, as the framework provides these capabilities out of the box. So, while Firebase might be simpler for a real-time counter, Fluid Framework is simpler for a real-time collaborative text editor.

In summary:

  • Simplest for general real-time data updates (e.g., chat, simple dashboards): Firebase Realtime Database, Supabase Realtime.
  • Simplest for complex, multi-user collaborative editing (e.g., shared documents, whiteboards): Fluid Framework or Liveblocks (which builds on CRDTs like Yjs but provides a managed service and higher-level APIs). These abstract away the most challenging aspects of distributed state management.

Q: List of MIT licensed whiteboard software

A: Finding a comprehensive, up-to-date list of all MIT-licensed whiteboard software can be challenging, as new projects emerge and old ones change licenses or become inactive. However, here are some prominent examples and types of MIT-licensed whiteboard software or libraries that are commonly cited or found on GitHub:

1. Excalidraw

  • Description: A popular virtual whiteboard for sketching hand-drawn like diagrams. It's known for its distinctive hand-drawn aesthetic and has excellent real-time collaboration features (the hosted version at excalidraw.com uses end-to-end encryption for collaboration). The core editor is an npm package that can be integrated into other applications.
  • License: MIT License
  • Key Features: Hand-drawn style, infinite canvas, dark mode, customizable, image support, shape libraries, export options (PNG, SVG, JSON), wide range of drawing tools, real-time collaboration, end-to-end encryption (on excalidraw.com), local-first support.
  • GitHub: https://github.com/excalidraw/excalidraw

2. Cocreate Shared Whiteboard/Drawing

  • Description: A web-based shared whiteboard tool focused on drawing, teaching, and brainstorming. It emphasizes instant board creation without accounts and offers unique features like pressure sensitivity and separation of pen, touch, and mouse inputs.
  • License: MIT License
  • Key Features: No accounts required, instant board creation, real-time cursor display, pressure sensitivity, LaTeX math support, image embedding, vector-based drawing, multiple pages, time travel/history.
  • GitHub: https://github.com/edemaine/cocreate

3. cracker0dks/whiteboard (Lightweight collaborative Whiteboard / Sketchboard)

  • Description: A lightweight Node.js collaborative whiteboard/sketchboard that is highly customizable. It includes features like remote user cursors, undo/redo, image/PDF drag-and-drop, and a REST API.
  • License: MIT License
  • Key Features: Real-time multi-user drawing, undo/redo per user, image/PDF support, resize/move/rotate elements, sticky notes, keybindings, mobile-friendly, REST API.
  • GitHub: https://github.com/cracker0dks/whiteboard

4. TheBoard (A collaborative Whiteboard powered by the Matrix protocol)

  • Description: This project uses the Matrix protocol as its backend for real-time synchronization. Drawings are stored in Matrix rooms, providing robust authentication and decentralized potential.
  • License: MIT License
  • Key Features: Matrix protocol backend, real-time synchronization, authentication via Matrix accounts, object tree for fast interaction with elements, smoother paths using Paper.js.
  • GitHub: https://github.com/toger5/TheBoard

5. BoardFlow (Example using Liveblocks)

  • Description: While not a standalone whiteboard application for end-users, BoardFlow is an example collaborative whiteboard app built using Next.js, Liveblocks, Convex, and Clerk. Its source code is MIT licensed and serves as an excellent reference for building your own collaborative whiteboard with modern tools. Liveblocks itself is a separate real-time collaboration infrastructure.
  • License: MIT License
  • Key Features (as an example): Real-time collaboration, text, notes, shapes, images, pencils, organization management.
  • GitHub: https://github.com/Biplo12/BoardFlow

Important Considerations for MIT-Licensed Whiteboard Software:

  • Self-Hosting: Many MIT-licensed whiteboards are designed for self-hosting. This means you'll need to set up and manage your own server to run the backend components for real-time collaboration.
  • Feature Set: Open-source whiteboards can vary significantly in their feature sets. Some are very basic, while others approach the capabilities of commercial tools.
  • Maintenance and Community: Look for projects with active development and a community, as this often indicates better support and ongoing improvements.
  • Dependencies: While the core software might be MIT, it may depend on other libraries or services that have their own licenses or require specific setups (e.g., a database, a real-time service like Liveblocks, or a Matrix server).

When searching for MIT-licensed software, GitHub is your best friend. You can often filter by license type to discover more options.

Q: What web framework has multi-user excalidraw

A: Excalidraw itself is a JavaScript library/component (specifically a React component) that provides the drawing functionality. It doesn't inherently come as part of a specific web framework like React, Angular, or Vue.js.

Instead, to get multi-user Excalidraw, you need to integrate the Excalidraw component into your chosen web framework and then add a real-time collaboration backend. The magic of multi-user functionality comes from how you handle the synchronization of Excalidraw's state across clients, not from the web framework itself.

Here's how multi-user Excalidraw is typically implemented and the role of web frameworks:

  1. Excalidraw Core Library (@excalidraw/excalidraw): This is the fundamental package that provides the drawing editor. It's a React component, meaning it's naturally at home in React applications.

  2. Real-time Collaboration Backend: This is the crucial part for multi-user functionality. It's responsible for:

    • Broadcasting changes made by one user to all other connected users.
    • Handling conflict resolution if multiple users modify the same element simultaneously.
    • Persisting the drawing state.

    Common technologies used for this include:

    • WebSockets: A direct, low-level way to establish real-time, bidirectional communication.
    • Real-time Database/Service:
      • Firebase Realtime Database / Firestore: Excellent for quick prototyping and scaling.
      • Supabase Realtime: An open-source alternative to Firebase with real-time capabilities.
      • Liveblocks: A purpose-built real-time collaboration infrastructure that integrates very smoothly with React and provides SDKs for features like presence, live cursors, and shared state (often using CRDTs internally). This is a very popular choice for Excalidraw collaboration.
      • Socket.IO: A widely used library for real-time web applications, built on WebSockets.
      • Fluid Framework: As discussed previously, Fluid Framework with its Distributed Data Structures (DDSes) is an excellent candidate for synchronizing complex collaborative state like an Excalidraw canvas.
      • Self-hosted solutions using CRDTs (e.g., Yjs, Automerge): You can use these libraries to manage the collaborative data model and then connect them to your own WebSocket server.

How it works with web frameworks:

  • React: Excalidraw is a React component, so integrating it into a React application is the most straightforward and idiomatic way. You'd typically manage the Excalidraw state within your React components and use React hooks to connect to your real-time backend. Many examples and guides for collaborative Excalidraw are built with React.

  • Other Frameworks (Angular, Vue.js, Svelte, etc.): While Excalidraw is a React component, it's possible to integrate React components into other frameworks using techniques like:

    • Web Components: Wrapping the React component as a Web Component.
    • Framework Interoperability Layers: Libraries or patterns designed to bridge between frameworks.
    • Direct DOM Manipulation (less ideal for complex apps): Directly rendering the Excalidraw component into a DOM element.

    Once integrated, the real-time collaboration logic would still be handled by a backend service and your client-side code for that framework would interact with that service to send and receive Excalidraw updates.

Examples of Web Frameworks/Environments where multi-user Excalidraw is commonly seen or built:

  • Next.js (React Framework): A popular choice for building performant React applications, including those with real-time features.
  • Remix (React Framework): Another full-stack React framework that can host collaborative Excalidraw.
  • Any SPA (Single Page Application) framework (React, Angular, Vue): As long as you handle the real-time data synchronization, Excalidraw can be integrated.

In summary: There isn't one "web framework" that has multi-user Excalidraw out of the box. Excalidraw is a UI component, and the "multi-user" aspect comes from integrating it with a real-time backend service. React is the most natural fit due to Excalidraw being a React component, but with effort, it can be made to work with others.

Q: List of MIT licensed software that uses Excalidraw

A: Excalidraw itself is an MIT-licensed project, and its core library (@excalidraw/excalidraw) is designed to be embedded and used in other applications. This means that any software can legally use and integrate Excalidraw, even if that software itself is not MIT licensed (e.g., proprietary software).

However, you're asking specifically for MIT-licensed software that uses Excalidraw. This typically refers to other open-source projects that have chosen the MIT license for their own codebase and have integrated Excalidraw as a component.

Here's a list of categories and specific examples (where known) of MIT-licensed software that uses Excalidraw:

1. Excalidraw's Own Ecosystem and Related Tools:

  • excalidraw/excalidraw (The Main Repository): This is the primary project. While it's the source of the library, the excalidraw-app within this monorepo is the web application you see at excalidraw.com, and its source is also MIT licensed. This repository also contains various examples and internal tools that use the Excalidraw component, all under the MIT license.
  • Excalidraw Libraries: The libraries available at libraries.excalidraw.com are collections of shapes and icons that can be imported into Excalidraw. While these are data, the tools and processes for managing them, and the understanding is that content contributed there would also be freely usable, often aligning with MIT principles.
  • yctimlin/mcp_excalidraw (Excalidraw MCP Server): This is an MIT-licensed Node.js API that enables Large Language Models (LLMs) to create and manipulate Excalidraw diagrams. It uses the Excalidraw library internally to render and process the diagrams.

2. Note-Taking and Knowledge Management Tools:

Many personal knowledge management (PKM) tools or note-taking apps that are open source and MIT-licensed often integrate Excalidraw to provide drawing and diagramming capabilities directly within their environment.

  • Draw (by macintushar): This is an open-source Excalidraw wrapper that uses Supabase for data synchronization. It's explicitly mentioned as MIT licensed and is a good example of someone building a collaborative drawing app around Excalidraw with an open-source backend.
    • GitHub: https://github.com/macintushar/draw (mentioned in a Reddit thread as MIT)
  • Noteey: While Noteey itself might be a commercial product, its "License Notices" page explicitly states that it uses Excalidraw and acknowledges its MIT License. This shows how MIT-licensed software can be incorporated into other products, even if the final product's license isn't MIT.

3. Collaborative Development and Whiteboarding Tools (Examples/Templates):

Often, open-source projects providing templates or examples for building collaborative tools will use Excalidraw.

  • BoardFlow: This is an example collaborative whiteboard app built using Next.js, Liveblocks, Convex, and Clerk. Its source code is MIT licensed, showcasing how to build a collaborative Excalidraw experience using a modern tech stack.
    • GitHub: https://github.com/Biplo12/BoardFlow

4. Various Other Open-Source Projects:

Excalidraw's ease of embedding means it can pop up in a wide variety of MIT-licensed projects where a drawing surface is useful:

  • Project Documentation Tools: Some internal or open-source documentation platforms might embed Excalidraw to allow users to quickly sketch diagrams for their docs.
  • Education Platforms: Open-source e-learning tools could integrate Excalidraw for interactive lessons or assignments.
  • Code Editors/IDEs (as extensions/plugins): For instance, the Visual Studio Code Excalidraw extension is MIT licensed, allowing you to create Excalidraw diagrams directly within VS Code.
    • GitHub: https://github.com/excalidraw/excalidraw-vscode (part of the Excalidraw ecosystem, but a distinct product)

How to Find More:

The best way to find more MIT-licensed software using Excalidraw is to:

  • Search GitHub: Use terms like "uses excalidraw" license:MIT, "excalidraw integration" license:MIT, or search for specific package.json files that list @excalidraw/excalidraw as a dependency and then check the project's LICENSE file.
  • Explore Excalidraw's GitHub "Used By" Section: Sometimes, the "Used By" or "Dependents" section on a GitHub repository can list other projects that integrate it, though you'd then need to manually check their licenses.

Since Excalidraw is a fundamental building block for drawing, many developers appreciate its MIT license, which allows them maximum freedom to use it in their own projects, regardless of their own project's licensing.