DOCSEARCHbyAlgolia
Submit Docs

Liqvid Documentation

website·Indexed 33 days ago

https://liqvidjs.org

A library for producing interactive tutorials and liquid videos. It features a core Playback engine, a GUI Player interface, and a CLI for serving previews and rendering videos to mp4/webm. The ecosystem includes components for <Video> and <Audio>, hooks for React, and integrations for KaTeX, MathJax, and React Three Fiber.

Tokens
22.1K
Snippets
145
Records
225
Agent score
63%

What's inside Liqvid

  1. Overview of Liqvid core and plugin packages

    Liqvid is structured as a lightweight core framework with complex effects provided via separate packages. The primary core package is liqvid. Specialized functionality is split into plugins for recording and replaying specific user interactions.

  2. Overview of Liqvid CodeMirror recording plugins

    Liqvid provides a suite of recording plugins for CodeMirror that allow developers to record and replay code changes across multiple files (e.g., HTML, CSS, and JS). These plugins are designed to be interoperable with animation libraries such as Remotion and GSAP. The available packages include @lqv/codebooth, @lqv/codemirror, and @lqv/cursor.

  3. Overview of the MediaElement and SyntheticMediaElement proposal

    MediaElement is a proposed abstract interface for general-purpose imperative animation, patterned after HTMLMediaElement. It allows animations to be synced to a source of truth by subscribing to the timeupdate event and reading the .currentTime property.

    SyntheticMediaElement is a concrete implementation of this interface intended for library authors. Unlike HTMLMediaElement, it is not tied to the DOM, making it suitable for non-DOM environments (e.g., Node.js) or for orchestrating complex animations (e.g., THREE.js scenes) that aren't tied to a single <audio> or <video> element.

  4. Overview of @lqv/codebooth

    The @lqv/codebooth package provides a GUI for interactive coding tutorials. It is built on top of @lqv/codemirror. It is designed for flexibility, providing individual components to build a custom UI or presets for common use cases.

    Critical Constraint: This package currently does not work in React Strict Mode.

  5. Overview of liqvid-cli commands

    The liqvid CLI provides the following primary utilities for project mastering:

    • liqvid audio: Join, convert, and transcribe audio.
    • liqvid build: Bundle a project for deployment.
    • liqvid render: Render content to static video.
    • liqvid serve: Run a preview server for a video.
    • liqvid thumbs: Generate thumbnails.

  6. Overview of the Keymap class

    The Keymap class handles keyboard shortcuts and is available as a standalone package @liqvid/keymap. While you can create multiple instances, a Keymap instance is typically attached to and accessed via the Player object.

  7. Use Liqvid videos on mobile devices

    Liqvid videos are fully functional on mobile devices, although some UX improvements may be needed. Developers should refer to the mobile-specific guide for tips on ensuring videos are mobile-friendly.

  8. Develop videos using Liqvid with CSS and LiveReload

    Liqvid allows for rapid video development by eliminating traditional render times. Developers can style videos using CSS and utilize LiveReload to see visual changes applied in real-time while the video is running.

  9. Integrate Web Animations API in Liqvid

    Starting with Liqvid 2.1, the Web Animations API is supported within videos, allowing for easier creation of animations compared to previous versions.

  10. Understand the difference between @liqvid and @lqv packages

    The Liqvid ecosystem splits functionality into two primary namespaces: @lqv/* and @liqvid.

    • @lqv/*: These packages are designed to be framework-agnostic and compatible with other frameworks to avoid framework-specific fragmentation in the interactive video space.
    • @liqvid: Contains specific implementations, some of which are commercial.

  12. Integrate JavaScript libraries and React components into Liqvid videos

    Liqvid allows the use of the broader JavaScript ecosystem to create video content. This includes integrating interactive graphics via THREE.js, interactive coding demonstrations via CodeMirror, and the creation of reusable React components for distribution across multiple videos.